SVG DEFS元素
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>
-
- <use xlink:href="#shape" x="50" y="50" />
- <use xlink:href="#shape" x="200" y="50" />
- </svg>
要引用<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>
要引用<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>
注意上面的代碼中，原始的圖形并沒有設置樣式，它將是默認的樣式(黑色)。
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506132029.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。