SVG <use>元素可以重用SVG文檔中其他位置(包括 <g>元素和 <symbol>元素)的SVG形狀??梢栽?<defs>元素內(nèi)部(使形狀直到使用之前不可見)或外部定義重用形狀。
這是<use>元素的一個(gè)簡(jiǎn)單示例:
<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>測(cè)試看看?/?
這個(gè)實(shí)例顯示了在<defs>元素中定義的<g>元素。這使得<g>不可見,除非被<use>元素引用。
在引用<g>元素之前,必須通過(guò)其ID屬性對(duì)其設(shè)置ID。<use>元素通過(guò)其xlink:href屬性。注意屬性值中ID前面的#。
<use>元素通過(guò)其x和y屬性指定在何處顯示重復(fù)使用的形狀。 請(qǐng)注意,<g>元素內(nèi)部的形狀位于0,0。 這樣做是因?yàn)樗鼈兊奈恢靡烟砑拥?lt;use>元素中指定的位置。
運(yùn)行后圖像效果:
藍(lán)點(diǎn)圓點(diǎn)不是示例的一部分。添加它們是為了顯示兩個(gè) <use> 元素的 x 和 y。
<use>元素可以重用SVG圖像中任何位置元素,只要該形狀具有唯一值的id屬性即可。 下面是一個(gè)實(shí)例:
<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>測(cè)試看看?/?
本示例定義了一個(gè)<g>元素,其中包含一個(gè)<rect>元素。 然后,它通過(guò)<use>元素重用<g>元素(包括嵌套的<rect>元素)。
運(yùn)行后圖像效果:
請(qǐng)注意,同時(shí)顯示了原始形狀及其重用版本。 之所以發(fā)生這種情況,是因?yàn)槲丛?lt;defs>元素或<symbol>元素內(nèi)定義要重用的形狀(<g>元素)。 因此它是可見的。
同樣,藍(lán)色圓點(diǎn)顯示<use>元素的坐標(biāo)。
如果原始形狀上沒(méi)有設(shè)置CSS樣式,則可以在重用形狀時(shí)設(shè)置CSS樣式。 您只需指定要在<use>元素的style屬性內(nèi)設(shè)置的樣式。這是一個(gè)示例:
<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>測(cè)試看看?/?
注意原始形狀上沒(méi)有設(shè)置style屬性。然后將使用默認(rèn)樣式(通常為黑色)進(jìn)行渲染。