亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

SVG <defs> 元素

SVG <defs>元素用于嵌入可在SVG映像內(nèi)重用的定義。例如,您可以將SVG形狀分組在一起,然后將其作為單個(gè)形狀重復(fù)使用。

defs示例

這是一個(gè)簡(jiǎn)單的<defs>元素示例:

<svg>
    <defs>
        <g>
            <rect x="100" y="100" width="100" height="100" />
            <circle cx="100" cy="100" r="100" />
        </g>
    </defs>
</svg>
測(cè)試看看?/?

在<defs>元素中定義的形狀不會(huì)顯示在SVG圖像中。在顯示它們之前,它們必須被<use>元素引用。下面是一個(gè)實(shí)例:

<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>元素之前,必須通過(guò)其id屬性為其設(shè)置一個(gè)ID。 <use>元素通過(guò)其xlink:href屬性引用<g>元素。 請(qǐng)注意屬性值中ID前面的#。

<use>元素通過(guò)其x和y屬性指定在何處顯示重復(fù)使用的形狀。 請(qǐng)注意,<g>元素內(nèi)部的形狀位于0,0。 這樣做是因?yàn)樗鼈兊奈恢靡烟砑拥?lt;use>元素中指定的位置。

運(yùn)行后圖像效果:

藍(lán)點(diǎn)不在示例中。 添加它們是為了顯示兩個(gè)<use>元素的x和y。

可以在defs元素中定義哪些元素?

您可以將以下元素放入<defs>元素:

  • 任何形狀元素(rect,line等)

  • g

  • symbol