知识点
-
pattern标签
定义:使用预定义的图形对一个对象进行填充或描边,就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern元素定义图案,然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。
重点:
使用pattern,可以指定各种各样的样式,然后把样式应用到fill填充或者stroke描边中,使控件多彩炫目
pattern定义好的一个样式,在应用到其他控件中时,会自动平铺。
stroke或fill通过url(#id)引用即可。
关键代码
<defs>
<pattern id="prefix__e" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M2 2h8v5H2z"/>
</pattern>
</defs>
<circle cx="160" cy="280" r="50" fill="none" stroke="url(#triangle)" stroke-width="25">
<animateTransform attributeName="transform" type="rotate" from="0 160 280" to="360 160 280" dur="10s" repeatCount="indefinite"/>
</circle>
通过pattern可以实现的效果就太多了,基本上之前话的图形都可以用来引用,发挥你的想象力,想要做出什么样的效果都可以。
看效果(为了炫酷一点,使用了animateTransform添加了自转)
Xi说孔方兄认证