SVG_24_pattern标签_使fill填充_stroke描边多姿多彩

知识点

  • pattern标签

定义:使用预定义的图形对一个对象进行填充或描边,就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern元素定义图案,然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

重点:

使用pattern,可以指定各种各样的样式,然后把样式应用到fill填充或者stroke描边中,使控件多彩炫目

pattern定义好的一个样式,在应用到其他控件中时,会自动平铺。

stroke或fill通过url(#id)引用即可。

 

关键代码

                                                    

 

通过pattern可以实现的效果就太多了,基本上之前话的图形都可以用来引用,发挥你的想象力,想要做出什么样的效果都可以。

 

看效果(为了炫酷一点,使用了animateTransform添加了自转)

Xi说孔方兄认证

​​​​​​​

你可能感兴趣的:(SVG)