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"屬性（XLINK：HREF =“＃S1線”）。 請注意: “use”標簽中還設置了x和y的屬性， 這兩個屬性會設置到被添加到的原始定義中（即，在例子中，圓的cx和cy）。 

由上面可見，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>