SVG輔助標簽 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　本文將詳細介紹SVG輔助標簽

超鏈接

　　在SVG中，可以使用超鏈接<a>。超鏈接可以添加到任意的圖形上，類比于熱區<area>

　　SVG中的超鏈接有如下3個常用屬性　　

xlink:href 指定連接地址
xlink:title 指定連接標題
target 指定打開方式

　　下面是一個例子

<svg version="1.1" width="300" height="70" xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="http://cnblogs.com">
    <rect x="10" y="10" width="30" height="30" fill="transparent" stroke="black"/>
  </a>
  <a xlink:href="http://cnblogs.com">
    <circle cx="80" cy="30" r="20" fill="transparent" stroke="black"/>
  </a>  
</svg>

　　點擊圖形，可跳轉到其他頁面

光柵圖像

　　SVG有一個image元素，可以利用它嵌入任意光柵（以及矢量）圖像。它的規格要求應用至少支持PNG、JPG和SVG格式文件

　　嵌入的圖像變成一個普通的SVG元素。這意味著，可以在其內容上用剪切、遮罩、濾鏡、旋轉等操作

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
</svg>

輔助標簽

　　SVG中有四個常用的輔助標簽：<g>、<use>、<symbol>、<defs>

【<g>】

　　<g>是一個分組(容器)標簽，用來組合元素。可以設置一組元素的屬性

　　由于<g>是一個通用的分組標簽，可以包含任何形狀，因此其只能設置所有形狀都有的屬性，包括stroke、fill等。由于cx、cy是圓特有的屬性，所以無法在<g>上設置

　　下面是一個制作同心圓的小實例

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
  <circle cx="50" cy="50" r="30" fill="transparent" stroke="black" stroke-width="5"></circle>
  <circle cx="50" cy="50" r="20" fill="transparent" stroke="black" stroke-width="5"></circle>
  <circle cx="50" cy="50" r="10" fill="transparent" stroke="black" stroke-width="5"></circle>
</svg>

　　如果要改變所有圓的樣式時，就要一個一個進行修改，稍顯麻煩。這時，使用分組標簽<g>就非常合適。如果想通過<g>標簽來平移所有<circle>元素的位置，可以使用transform()來實現

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(60,60)" fill="transparent" stroke="red" stroke-width="5">
    <circle r="40"></circle>
    <circle r="30"></circle>
    <circle r="20"></circle>
    <circle r="10"></circle>    
  </g>
</svg>

【defs】

　　SVG允許定義以后需要重復使用的圖形元素。建議把所有需要再次使用的引用元素定義在defs元素里面。這樣做可以增加SVG內容的易讀性和可訪問性。在defs元素中定義的圖形元素不會直接呈現

<svg version="1.1" height="40" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="Gradient01">
    <stop offset="20%" stop-color="#39F" />
    <stop offset="90%" stop-color="#F3F" />
  </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="30" 
      fill="url(#Gradient01)"  />
</svg>

【use】

　　use元素在SVG文檔內取得目標節點，并在別的地方復制它們。它的效果等同于這些節點被深克隆到一個不可見的DOM中，然后將其粘貼到use元素的位置

　　因為克隆的節點是不可見的，所以當使用CSS樣式化一個use元素以及它的隱藏的后代元素的時候，隱藏的、克隆的DOM不能保證繼承CSS屬性，除非明文設置使用CSS繼承。

　　出于安全原因，一些瀏覽器可能在use元素上應用同源策略，還有可能拒絕載入xlink:href屬性內的跨源URI

<svg version="1.1" height="70" xmlns="http://www.w3.org/2000/svg">
<defs>
  <circle  id="Port" r="10"/>
</defs>
<text y="15">black</text>
<use x="50" y="10" xlink:href="#Port" />
<text y="35">red</text>
<use x="50" y="30" xlink:href="#Port" fill="red"/>
<text y="55">blue</text>
<use x="50" y="50" xlink:href="#Port" fill="blue"/>
</svg>

【symbol】

　　symbol元素用來定義一個圖形模板對象，它可以用一個<use>元素實例化。symbol元素對圖形的作用是在同一文檔中多次使用，添加結構和語義，從而提升了可訪問性

　　一個symbol元素本身是不呈現的。只有symbol元素的實例（亦即，一個引用了symbol的 <use>元素）才能呈現

　　一個<symbol>元素可以有preserveAspectRatio和viewBox屬性。而<g>元素不能擁有這些屬性。因此相比于在<defs>元素中使用<g>的方式來復用圖形，使用<symbol>元素也許是一個更好的選擇

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg">
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>