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說孔方兄認證

​​​​​​​