svg 标签

 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″…

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

由上面可见,defs和use配合使用。

变换SVG元素

SVG中可以将多个元素结合起来,使它们形成一个组,变为一个整体。

<g>元素代表“组”,可以用来结合多个相关的元素。组内成员可以由通过ID来引用。些外,组也可以作为一个整体进行变换。如果你为组添加了变换属性,那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。

<svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

 

路径

SVG不公包含简单的形状,还包含自由形态的路径。path元素有一个d属性,代表路径数据。在d的值中,M代表移至(Move to),L代表划线至(Line to),Q代表二次曲线,Z代表闭合路径。

  <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

文本

SVG中文本有点类型于CSS中对于样式的定义

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

 

 

 

0 条评论
发表一条评论