SVG Use(轉）

轉自：http://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

未來必熱：SVG Sprite技術介紹

一、Sprite技術

這里所說的Sprite技術，沒錯，類似於CSS中的Sprite技術。圖標圖形整合在一起，實際呈現的時候准確顯示特定圖標。

二、SVG Sprite與symbol元素

目前，SVG Sprite最佳實踐是使用symbol元素。symbol元素是什么呢？單純翻譯的話，是“符號”的意思。然，這個釋義並不符合這里的場景。不知大家有沒有用過Flash，symbol實際上就類似於Flash中的“影片剪輯”、或者“元件”。

因此，我個人覺得，symbol應該解釋為“元件”最為恰當！

那，symbol和SVG Sprite又有什么關系呢？

我們可以把SVG元素看成一個舞台，而symbol則是舞台上一個一個組裝好的元件，這這些一個一個的元件就是我們即將使用的一個一個SVG圖標。

於是，對於一個集合了三個SVG圖標的SVG元素的代碼結構會是這樣：

<svg>
    <symbol>
        <!-- 第1個圖標路徑形狀之類代碼 -->
    </symbol>
    <symbol>
        <!-- 第2個圖標路徑形狀之類代碼 -->
    </symbol>
    <symbol>
        <!-- 第3個圖標路徑形狀之類代碼 -->
    </symbol>
</svg>

每一個symbol就是一個圖標元件，但是，只有上面的代碼，是無法呈現類似下面的效果的：

為何？

因為，舞台上只是放置了圖標，如果你不使用(use)，是看不見的。就好比你女朋友買了幾箱的衣服放家里，如果不穿出去，誰知道她這么土豪呢？

因此，還差一個“使用”，也就是SVG中的<use>元素。

三、SVG中的use元素

use元素是SVG中非常強大，非常重要的一個元素，尤其在Web開發中，為何？

兩點：

1. 可重復調用；
2. 跨SVG調用；

1. 可重復調用
你好不容易，用了幾十個坐標值，好不容易繪制了一個圖形，如果你想再弄一個同樣造型，但位置不同的圖形出來，你會怎么辦？——再復制一遍代碼？別說笑了，（如果真那樣）SVG文件的尺寸趕得上二師兄的腰圍了。

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

結果是（IE9+瀏覽器可見）：

首先，注意到沒有，use元素是通過xlink:href屬性，尋找要使用的元素的。#shape對應的就是id為shape的元素。use元素可以有自己的坐標，以及支持transform變換，甚至可以use其他use元素。

這里，兩個use元素使用的是同一個g元素（組合），從而實現了圖形的重復調用功能。

2. 跨SVG調用
SVG中的use元素可以調用其他SVG文件的元素，只要在一個文檔中。

<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>

結果仍是那個圖形：

而這個跨SVG調用就是“SVG Sprite技術”的核心所在。

試想下，我們只要在頁面某處載入一個充滿Sprite(symbol)的SVG文件（或直接include SVG代碼），於是，在頁面的任何角落，只要想使用這個圖標，只要簡單這一點代碼就可以了：

<svg class="size"><use xlink:href="#target" /></svg>

圖標尺寸CSS控制，里面只有一個僅有xlink:href屬性的use元素，Done! 完成！

也即是說，在HTML層面，圖標使用的代碼成本，跟傳統的CSS Sprite或者流行的font-face幾乎無異，代碼簡潔，而且很好維護。所有的SVG圖標都在一個SVG源上。retina良好，尺寸可任意拉伸，且顏色可控，真乃Web圖標的未來之星。

 

 

http://tutorials.jenkov.com/svg/use-element.html

The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs>element (which makes the shape invisible until used) or outside.

A use Example

Here is a simple example of the <use> element:

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

This example shows a <g> element defined inside a <defs> element. This makes the <g> invisible unless referenced by a <use> element.

Before the <g> element can be referenced, it must have an ID set on it via its id attribute. The <use> element references the <g> element via its xlink:href attribute. Notice the # in front of the ID in the attribute value.

The <use> element specifies where to show the reused shapes via its x and y attributes. Notice that the shapes inside the <g> element are located at 0,0. That is done because their position is added to the position specified in the <use> element.

Here is the resulting image:

The blue dots are not part of the example. They are added to show the x and y of the two <use>elements.

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

 

Using Shapes Outside of a defs Element

The <use> element can reuse elements from anywhere in an SVG image as long as that shape has an id attribute with a unique value. Here is an example:

This example defines a <g> element with a <rect> element inside. Then it reuses the <g> element (including the nested <rect> element) via a <use> element.

Here is the resulting image:

Notice that both the original shape and its reused version are shown. That is happening because the shape that is reused (the <g> element) is not defined inside the <defs> element or <symbol>element. Therefore it is visible.

Again, the blue dot shows the coordinates of the <use> element.

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

 

Setting CSS Styles

You can set the CSS styles when reusing a shape, if the original shape has no CSS style set on it. You simply specify the styles to set inside the style attribute of the <use> element. Here is an example:

Notice how the original shape has no style attribute set on it. It will then be rendered with default styles (typically black).