SVG 2D入門7 - 重用與引用

時間 2019-11-25

標籤 svg 2d 入門重用引用简体版

原文原文鏈接

前面介紹了不少的圖形元素，若是不少圖形自己是同樣的，須要每次都去定義一個新的麼？咱們可否共用一些圖形呢？這是這節的重點 - SVG元素的重用。 canvas

組合 - g元素
g元素是一種容器，它組合一組相關的圖形元素成爲一個總體；這樣，咱們就能夠對這個總體進行操做。這個元素一般能夠和desc和title元素配合使用，提供文檔的結構信息。結構良好的文檔一般可讀性和渲染效率都不錯。看一個小例子：svg

注意幾點：
1. xmlns="http://www.w3.org/2000/svg"代表了整個svg元素默認的命名空間是svg。這個在無歧義的時候能夠省略。這裏因爲svg文檔是一個XML文檔，XML命名空間的相關規則這裏都是適用的。例如能夠給svg顯示的指定命名空間，給命名空間提供別名等。
2. g元素是能夠嵌套的。
3. 組合起來的圖形元素就和單個的元素同樣，能夠給id值，這樣，須要的時候(例如動畫和重用一組元素)只用引用這個id值就能夠了。
4. 組合一組圖形元素能夠統一設置這組元素的相關屬性(fill,stroke,transform等)，這也是使用組合的一種場景。動畫

模板 - symbol元素
      symbol元素用於定義圖形模板(模板能夠包含不少圖形)，這個模板能夠被use元素實例化。模板的功能與g元素很類似，都是提供一組圖形對象，可是也有一些區別。與g元素不一樣的地方是：
1.symbol元素自己是不會被渲染的，只有symbol模板的實例會被渲染。
2.symbol元素能夠擁有屬性viewBox和preserveAspectRatio，這些容許symbol縮放圖形元素。
      從渲染角度來講，與symbol元素類似的元素是marker(定義箭頭和標號)和pattern(定義顏色)元素；這些元素不會直接被渲染；他們的使用方式基本都是由use元素去實例化。正是這個緣由，對於symbol來講，'display'屬性是沒有意義的。
      下面這個修改過的代碼顯示了symbol的使用方式：url

定義 - defs元素
SVG容許定義一組對象，而後重用這組對象(注意，不只僅是圖形對象)。最多見的例子如定義漸變色，而後再其餘的圖形對象中賦給fill屬性。漸變色定義的時候是不會渲染的，因此這類型的對象能夠放到任何地方。重用對於圖形對象中也是常常存在的，並且咱們也不但願定義的時候直接渲染，而是想在引用的地方渲染，這個能夠用defs元素實現。spa

一般狀況下，推薦的作法是：只要有可能，就把被引用的對象放到defs元素中。這些對象一般是：altGlyphDef,clipPath,cursor,filter, marker,mask,pattern,linearGradient,radialGradient，symbol和圖形對象等。把這些對象定義在defs元素中很容易理解，因此就提升了可訪問性。
其實做爲容器對象的g元素、symbol元素、defs元素都不一樣程度上提供了重用的做用，只不過每一個元素的特性可能少量不一樣：好比g元素是直接渲染的，symbol和defs不會直接渲染，symbol含有viewBox屬性，會建立新的視窗。code

一般都會給在defs中定義的元素賦予id屬性，並在用到的地方直接使用。根據元素的不一樣，這些定義能夠用到不一樣地方，好比下面的漸進色做爲屬性來使用了：orm

圖形相關元素的定義能夠用use元素連接到文檔。例如：xml

在這裏請注意xlink名稱空間的使用。儘管大多數查看器沒有它也將正確顯示這一項，但爲了保持一致，xlink名稱空間應該在<svg></svg>元素上定義。對象

引用 - use元素
      任何svg, symbol, g, 單個的圖形元素和use元素本質上均可以做爲模板對象被use元素引用(例如初始化)。use引用的圖形內容會在指定的位置渲染。與image元素不一樣，use元素不能引用整個文檔。
      use元素也有x, y, width和height屬性，這些屬性能夠省略，若是不省略的話，會將被引用的圖形內容座標或長度映射到當前的用戶座標空間來。
      use元素的做用過程就至關於把被引用的對象深拷貝一份到獨立的非公開的DOM樹中；這棵樹的父節點是use元素。雖然是非公開的DOM節點，可是本質上仍是DOM節點，因此被引用對象的全部屬性值、動畫、事件、CSS的相關設置等都會拷貝多來並都仍是會起做用，並且這些節點也會繼承use元素和use祖先的相關屬性(注意引用元素是深拷貝，這些拷貝過來的元素與原來的元素已經無關係了，因此這裏不會繼承被引用元素祖先節點的屬性)，若是這些節點自己有相關(CSS)屬性，還會覆蓋繼承來的屬性，這些與普通的DOM節點是一致的，因此對use元素使用"visibility:hidden"時要當心，並不必定會起做用。可是因爲這部分節點是非公開的，在DOM操做中，也只能看到use元素，因此也只能操做到use元素。
      從視覺效果來看，use元素更像是佔位符，渲染完成後的視覺效果就和直接用被引用對象渲染是同樣的：
1. use元素引用一個symbol元素
      這種狀況下，視覺效果就至關於：
(1) 把use元素換成g元素；
(2) 把use的除x,y,width,height,xlink:href外的屬性所有移到g元素；
(3) 把use的x,y屬性變成translate(x,y)，追加到g元素的transform屬性最後；
(4) 把引用的symbol元素換成svg元素，這個svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則是100%)；
(5) 把引用的symbol元素的圖形內容深拷貝到替換的svg中。
2. use元素引用一個svg元素
      這種狀況下，視覺效果就至關於：
(1) 把use元素換成g元素；
(2) 把use的除x,y,width,height,xlink:href外的屬性所有移到g元素；
(3) 把use的x,y屬性變成translate(x,y)，追加到g元素的transform屬性最後；
(4) 把引用的svg元素包括內容拷貝過來，這個svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則使用原來的值)；
3. 其餘狀況
      這些狀況下的視覺效果就至關於：
(1) 把use元素換成g元素；
(2) 把use的除x,y,width,height,xlink:href外的屬性所有移到g元素；
(3) 把use的x,y屬性變成translate(x,y)，追加到g元素的transform屬性最後；
(4) 把引用元素拷貝過來；
      看下面例子的視覺效果：blog

下面的圖和上面的圖外觀是同樣的：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。