一篇文章帶你了解SVG <use> 元素
SVG 元素可以重用SVG文檔中其他位置(包括 元素和 元素)的SVG形狀。可以在 元素內部(使形狀直到使用之前不可見)或外部定義重用形狀。
一、簡單案例分析
示例
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </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>
這個實例顯示了在元素中定義的元素。這使得不可見，除非被元素引用。
在引用元素之前，必須通過其ID屬性對其設置ID。元素通過其xlink:href屬性。注意屬性值中ID前面的#。
元素通過其x和y屬性指定在何處顯示重復使用的形狀。請注意，元素內部的形狀位于0,0。這樣做是因為它們的位置已添加到元素中指定的位置。
運行后圖像效果：
圖片
藍點圓點不是示例的一部分。添加它們是為了顯示兩個 元素的 x 和 y。
二、在defs元素外使用形狀
元素可以重用SVG圖像中任何位置元素，只要該形狀具有唯一值的id屬性即可。
示例
本示例定義了一個元素，其中包含一個元素。然后，它通過元素重用元素(包括嵌套的元素)。
運行后圖像效果：
藍點圓點不是示例的一部分。添加它們是為了顯示兩個 <use> 元素的 x 和 y。
二、在defs元素外使用形狀
<use>元素可以重用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>
本示例定義了一個<g>元素，其中包含一個<rect>元素。然后，它通過<use>元素重用<g>元素（包括嵌套的<rect>元素）。
運行后圖像效果：
注
同時顯示了原始形狀及其重用版本。之所以發生這種情況，是因為未在<defs>元素或<symbol>元素內定義要重用的形狀（<g>元素）。因此它是可見的。
同樣，藍色圓點顯示<use>元素的坐標。
三、設置CSS樣式
如果原始形狀上沒有設置CSS樣式，則可以在重用形狀時設置CSS樣式。只需指定要在元素的style屬性內設置的樣式。這是一個示例：
例
- <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>
注
原始形狀上沒有設置style屬性。然后將使用默認樣式(通常為黑色)進行渲染。
四、總結
本文基于SVG基礎，介紹了如何重用SVG文檔中其他位置，設置CSS樣式。通過案例分析，運行效果的展示 ，能夠更直觀的，更具有看到在實際項目中應用。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。
