SVG DEFS元素
SVG的<defs>元素用于預(yù)定義一個(gè)元素使其能夠在SVG圖像中重復(fù)使用于样。例如你可以將一些圖形制作為一個(gè)組昌渤,并用<defs>元素來(lái)定義它筒愚,然后你就可以在SVG圖像中將它當(dāng)做簡(jiǎn)單圖形來(lái)重復(fù)使用抡句≌福看下面的例子:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<g>
<rect x="100" y="100" width="100" height="100" />
<circle cx="100" cy="100" r="100" />
</g>
</defs>
</svg>
在<defs>元素中定義的圖形不會(huì)直接顯示在SVG圖像上。要顯示它們需要使用<use>元素來(lái)引入它們拷获。如下面的代碼所示:
<svg
xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
<use
xlink:href="#shape"
x="50"
y="50"
/>
<use
xlink:href="#shape"
x="200"
y="50"
/>
</svg>
要引用<g>元素篮撑,必須在<g>元素上設(shè)置一個(gè)ID,通過(guò)ID來(lái)引用它匆瓜。<use>元素通過(guò)xlink:href屬性來(lái)引入<g>元素赢笨。注意在ID前面要添加一個(gè)#。
在<use>元素中驮吱,通過(guò)x和y屬性來(lái)指定重用圖形的顯示位置茧妒。注意在<g>元素中的圖形的定位點(diǎn)都是0,0,在使用<use>元素來(lái)引用它的時(shí)候左冬,它的定位點(diǎn)被轉(zhuǎn)換為<use>元素x和y屬性指定的位置桐筏。
下面是上面代碼的返回結(jié)果:
上面SVG圖像中綠色的圓點(diǎn)并不是示例代碼的一部分。它們是用來(lái)顯示2個(gè)<use>元素的x和y坐標(biāo)的又碌。
哪些元素可以被定義為defs中的元素呢九昧?
你可以將下面的元素放入到<defs>元素中使用:
任何圖形元素,如:rect毕匀,line等
g
symbol