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

知识点

• 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说孔方兄认证

​​​​​​​