一篇文章帶你了解SVG 元素
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習資料
SVG 元素可以重用SVG文檔中其他位置（包括
一、簡單案例分析
示例
<html lang="en"><head><meta charset="UTF-8"><title>Documenttitle>head><body style="background-color: aqua;"><svg width="500" height="100" style="fill: #FF0000;"><defs><g id="shape"><rect x="0" y="0" width="50" height="50" >rect><circle cx="0" cy="0" r="50">circle>g>defs><use xlink:href="#shape" x="50" y="50">use><use xlink:href="#shape" x="200" y="50">use><circle cx="50" cy="50" r="5" style="fill:#0000ff;">circle><circle cx="200" cy="50" r="5" style="fill:#0000ff;">circle>svg>body>html>
這個實例顯示了在
在引用
元素通過其x和y屬性指定在何處顯示重復(fù)使用的形狀。請注意，
運行后圖像效果：
藍點圓點不是示例的一部分。添加它們是為了顯示兩個 元素的 x 和 y。
二、在defs元素外使用形狀
元素可以重用SVG圖像中任何位置元素，只要該形狀具有唯一值的id屬性即可。
示例
<svg width="500" height="110"><g id="shape2"><rect x="0" y="0" width="50" height="50" />g><use xlink:href="#shape2" x="200" y="50" /><circle cx="200" cy="50" r="5" style="fill:#0000ff;" />svg>
本示例定義了一個
運行后圖像效果：
注
同時顯示了原始形狀及其重用版本。之所以發(fā)生這種情況，是因為未在
同樣，藍色圓點顯示元素的坐標。
三、設(shè)置CSS樣式
如果原始形狀上沒有設(shè)置CSS樣式，則可以在重用形狀時設(shè)置CSS樣式。只需指定要在元素的style屬性內(nèi)設(shè)置的樣式。這是一個示例：
例
<svg width="500" height="110"><g id="shape3"><rect x="0" y="0" width="50" height="50" />g><use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;" /><use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;" />svg>
注
原始形狀上沒有設(shè)置style屬性。然后將使用默認樣式（通常為黑色）進行渲染。
四、總結(jié)
本文基于SVG基礎(chǔ)，介紹了如何重用SVG文檔中其他位置，設(shè)置CSS樣式。通過案例分析，運行效果的展示 ，能夠更直觀的，更具有看到在實際項目中應(yīng)用。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學(xué)習有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習群請在后臺回復(fù)【入群】
萬水千山總是情，點個【在看】行不行