SVG <use> 元素

SVG <use>元素可以重用SVG文檔中其他位置(包括 <g>元素和 <symbol>元素)的SVG形狀??梢栽?<defs>元素內(nèi)部(使形狀直到使用之前不可見)或外部定義重用形狀。

use示例

這是<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。

在defs元素外使用形狀

<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)。

設(shè)置CSS樣式

如果原始形狀上沒(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)行渲染。

丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清