阅读 355

SVG剪切蒙版属性clip-path实战,动态蒙版+动态图形,动动组合

还是在做草莓音乐节宣传视频SVG+CSS3的实现过程的文章中遇到的问题,真是个庞大的工程,在写文章的过程中已经遇到了两个问题需要单独成文了。事情是这样的

这幅图将会在下篇文章中重复出现,提前预警
交代一下前因后果,右边的三角形、黄色圆形都是动态变化的,在这个动效中,关于右侧黄色圆形和三角形交集部分填充白色,最开始想到的方式是用蒙版

理论上,这个方法是可行的,但略为复杂了,然后就想到了一个SVG的标签,知道但从未在案例中使用过的<clip-path>,剪切路径蒙版。关于剪切蒙版,对于设计师小伙伴们来说太熟悉不过了,无论是PS还是AI,都是很常用的创建图形形状的方法。因为SVG本质就是图形,所以剪切蒙版就很容易理解了,无非定义一个图形,然后发挥剪切蒙版的作用,这个具体下面再说,因为现在,又面临了一个新的问题。

<use xlink:href="#"/>标签引用时的声明

因为动态三角形要作为剪切路径蒙版和自身两次使用,所以本能的想到用<symbol>标签来定义三角形,燃鹅,在我自信满满用<use>标签去引用的时候,浏览器却狠狠的给了我一个大嘴巴,它是这样的:

什么意思?大概就是被引用的部分没有被定义,没有被定义!没有!反反复复查看了很多遍,确信无误,然后开始了各种无边无际的遐想和改造,是不是不能定义有动效的元素?改!是不是只能用<defs>定义?改!改改改!然后,现实依然是崩溃的,不管你想要或者不想要,它就在那里嘲笑你,不离不弃。更让人捉急的是,这货在codepen里表现的那叫一个顺滑,我大chrome肿么了,欺负我小美工一枚,不懂代码啊。然后开始了苦逼的代码走查之路,哦哦,不不,称不上走查,我就是和以前的SVG文件源码对比对比。果不其然

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
复制代码

这是可正常运行的SVG文件的开头,而报错的开头是这样的

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
复制代码

不错,少了一句声明xmlns:xlink="http://www.w3.org/1999/xlink",由XLink规范定义的href属性。此属性被用作链接到其他资源的手段。好了,问题迎刃而解。

定义剪切蒙版时使用<use>标签引用的图形问题

加上之后的效果我就不截图了,因为浏览器没有报错,但剪切蒙版不好用了。我理所当然的以为应该是下面这种,写完之后心里还美滋滋,感觉自己这<symbol>用得炉火纯青,反复嵌套

<symbol id="reTri"> <!--定义三角形-->
<polygon points=" "/>
</symbol>  

<symbol><!-- 定义剪切蒙版 -->
<clipPath id="mix">
<use xlink:href="#reTri"/><!--引用定义的三角形-->
</clipPath>
</symbol>

 <g clip-path="url(#mix)"  > <!-- 圆形使用剪切蒙版 -->
 <circle ……/>
 </g>
复制代码

对,现实就是这么残酷,<symbol><clipPath>定义剪切蒙版时(或者<defs><clipPath>,效果是一样的,不过已经养成了习惯,<symbol>毕竟比<defs>好用很多),不允许是<use>标签引用的图形。没关系,无非是写两遍的问题。

<symbol><!-- 定义剪切蒙版 -->
<clipPath id="mix">
<polygon points=" "/> <!--直接定义三角形-->
</clipPath>
</symbol>

 <g clip-path="url(#mix)"  > <!-- 圆形使用剪切蒙版 -->
 <circle ……/>
 </g>
复制代码

这里圆形和三角形因为本身是有动画效果的,比较简单,就不说了,无非class属性(不用id是因为相同的动效被用了两次)去引用定义好的animation属性就可以了。

来看下效果,还不错,可以明显的看出来,黄色圆形的白色部分就是白色圆形使用了三角形剪切蒙版后的效果,最终只需要在最顶层叠加一个相同的三角形只有描边属性没有填充属性就可以了。

小结:关于剪切蒙版属性clip-path是个很强大的功能,剪切蒙版本身可以是一个有动效的图形,使用剪切蒙版的图形也可以自带动效,动动结合,可变幻出无数种组合,语法简单,唯一需要注意的是定义剪切蒙版时不要使用<use>标签引用的图形,还有就是蒙版是一个纯路径,不需要定义填充描边等属性。

关注下面的标签,发现更多相似文章
评论