SVG中的'defs' and 'use'-可复用的图元定义


在下一个示例中,我使用了defs中的元素之前,定义了如何去展现图元。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 1000 1000" version = "1.1">
    <defs>
        <!-- A circle of radius 200 -->
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- An ellipse (rx=200,ry=150) -->
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
    </defs>
    <use x = "100" y = "100" xlink:href = "#s1"/>
    <use x = "100" y = "650" xlink:href = "#s2"/>
</svg>

 请注意以下代码

 <circle id="s1"...

这行代码定义了一个圆,并且设置了他的ids1.  在后面的代码中, 可以使用这个ID来引用原来定义好的圆。 使用use标签,并在标签中设置"xlink:href"属性(XLINKHREF =“S1线)。 请注意“use”标签中还设置了xy的属性, 这两个属性会设置到被添加到的原始定义中(即,在例子中,圆的cxcy)。 

 

上一篇 下一篇

评论



分享