SVG defs元素

0914_h發表於2017-05-08
SVG

摘自：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506132029.html

SVG的<defs>元素用於預定義一個元素使其能夠在SVG影像中重複使用。例如你可以將一些圖形制作為一個組，並用<defs>元素來定義它，然後你就可以在SVG影像中將它當做簡單圖形來重複使用。看下面的例子

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
      <g>
          <rect x="100" y="100" width="100" height="100" />
          <circle cx="100" cy="100" r="100" />
      </g>
  </defs>
</svg>


在<defs>元素中定義的圖形不會直接顯示在SVG影像上。要顯示它們需要使用<use>元素來引入它們。如下面的程式碼所示：

<svg xmlns="http://www.w3.org/2000/svg">  
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

要引用<g>元素，必須在<g>元素上設定一個ID，通過ID來引用它。<use>元素通過xlink:href屬性來引入<g>元素。注意在ID前面要新增一個#。

在<use>元素中，通過x和y屬性來指定重用圖形的顯示位置。注意在<g>元素中的圖形的定位點都是0,0，在使用<use>元素來引用它的時候，它的定位點被轉換為<use>元素x和y屬性指定的位置。

下面是上面程式碼的返回結果：

上面SVG影像中綠色的圓點並不是示例程式碼的一部分。它們是用來顯示2個<use>元素的x和y座標的。

哪些元素可以被定義為defs中的元素呢？

你可以將下面的元素放入到<defs>元素中使用：

  • 任何圖形元素，如：rect，line等
  • g
  • symbol
 SVG symbol元素

SVG <symbol>元素用於定義可重複使用的符號。嵌入在<symbol>元素中的圖形是不會被直接顯示的，除非你使用<use>元素來引用它。

下面是一個使用<symbol>元素的簡單例子：

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/>
    </symbol>
 
    <use xlink:href="#shape2" x="50" y="25" />
</svg>

<symbol>元素需要一個ID號，以便以被<use>元素引用。

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

 SVG use元素

SVG <use>元素可以在SVG影像中多次重用一個預定義的SVG圖形，包括<g>元素和<symbol>元素。被重用的圖形可以在定義<defs>的內部（圖形將不可見直到使用use來引用它）或外部。

下面是一個使用<use>元素的例子：

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>
 
  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
 
</svg>

上面的例子顯示的是在<defs>元素中定義的<g>元素。

要引用<g>元素，必須給它一個ID號，通過ID號來引用它。

下面是上面程式碼的返回結果：

我們也可以引用不在<defs>元素中的圖形。<use>元素可以引用SCG影像中的任何元素，只要這個元素有一個唯一的ID號，例如：

<svg width="500" height="110">
 
    <g id="shape2">
        <rect x="0" y="0" width="50" height="50" />
    </g>
 
    <use xlink:href="#shape2" x="200" y="50" />
 
</svg>

這個例子在<g>元素中定義了一個<rect>元素。然後通過<use>元素來引用這個<g>元素。它返回的結果如下面所示：

注意這裡原始圖形和複用的圖形都會被顯示。因為原始的圖形並沒有定義在<defs>或<symbol>元素中。所以它是可見的。

你可以為引用的圖形設定CSS樣式。你可以在<use>元素中使用style屬性來為複用的圖形設定它的樣式。例如：

<svg width="500" height="110">
 
  <g id="shape3">
      <rect x="0" y="0" width="50" height="50" />
  </g>
 
  <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
  <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>
 
</svg>

注意上面的程式碼中，原始的圖形並沒有設定樣式，它將是預設的樣式（黑色）。

 返回SVG教程目錄

相關閱讀：

相關文章