SVG <use>元素可以重用SVG文檔中其他位置（包括 <g>元素和 <symbol>元素）的SVG形狀?？梢栽?<defs>元素內(nèi)部（使形狀直到使用之前不可見）或外部定義重用形狀。
這是<use>元素的一個簡單示例：
<svg width="500" height="100"> <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>測試看看?/?
這個實例顯示了在<defs>元素中定義的<g>元素。這使得<g>不可見，除非被<use>元素引用。
在引用<g>元素之前，必須通過其ID屬性對其設(shè)置ID。<use>元素通過其xlink:href屬性。注意屬性值中ID前面的#。
<use>元素通過其x和y屬性指定在何處顯示重復(fù)使用的形狀。 請注意，<g>元素內(nèi)部的形狀位于0,0。 這樣做是因為它們的位置已添加到<use>元素中指定的位置。
運行后圖像效果：
藍點圓點不是示例的一部分。添加它們是為了顯示兩個 <use> 元素的 x 和 y。
<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>元素）。
運行后圖像效果：
請注意，同時顯示了原始形狀及其重用版本。 之所以發(fā)生這種情況，是因為未在<defs>元素或<symbol>元素內(nèi)定義要重用的形狀（<g>元素）。 因此它是可見的。
同樣，藍色圓點顯示<use>元素的坐標。
如果原始形狀上沒有設(shè)置CSS樣式，則可以在重用形狀時設(shè)置CSS樣式。 您只需指定要在<use>元素的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屬性。然后將使用默認樣式（通常為黑色）進行渲染。