SVG的幾個標簽元素

 

defs

　　svg允許我們定義以后需要重復使用的圖形元素。建議把所有需要再次使用的元素定義在defs元素里面。這樣做可以增加svg內容的易讀性和可訪問性。在defs元素定義的元素不會直接呈現。你可以在你的視口的任意地方利用<use>元素呈現這些元素。

　　用法：

　　　　類別： 容器元素，結構元素　　　　

　　　　允許的內容物： 任意數量、任意排序的下列元素：動畫元素、描述性元素、形狀元素、結構化元素、漸變元素、　　　　　　             <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

　　實例：

<svg width="80px" height="30px" viewBox="0 0 80 30"
     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="10" 
        fill="url(#Gradient01)"  />
</svg>

 

pattern

　　使用預定義的圖形對一個對象進行填充或描邊，就要用到pattern元素。pattern元素讓預定義圖形能夠以固定間隔在x軸和y軸上重復(或平鋪)從而覆蓋要塗色的區域。先使用pattern元素定義圖案，然后在給定的圖形元素上用屬性fill或屬性stroke引用用來填充或描邊的圖案。

　　用法：

　　　　類別： 容器元素　

　　　　允許的內容物： 任意數量、任意排序的下列元素：動畫元素、描述性元素、形狀元素、結構化元素、漸變元素、<a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>,  <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

marker

　　marker元素定義了在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上繪制的箭頭或者多邊標記圖形。

　　用法：

　　　　類別： 容器元素

　　　　允許的內容物：任意數量、任意排序的下列元素：動畫元素、描述性元素、形狀元素、結構化元素、漸變元素、　<a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

filter

　  屬性filter定義了由<filter>元素定義濾鏡效果，該濾鏡效果將應用到該元素上。

　　作為一個外觀屬性，它可以直接用作CSS樣式表內部的屬性。請閱讀css filter以了解更多信息。

　　用法： 

　　　　類別： 外觀屬性

　　　　值： <funciri> | none | inherit

　　　　可變性： YES

　　　　規范文檔： SVG 1.1 (2nd Edition)

　　　　<funciri>元素的引用，它定義了將要應用到該元素的濾鏡效果。none不對該元素應用任何濾鏡效果。

　　　　下列元素可以使用filter屬性：圖形元素 »、<a>、<defs>、<glyph>、<g>、<marker>、<missing-glyph>、<pattern>、<svg>、<switch>、<symbol>

feColorMatrix

　　　該濾鏡基於轉換矩陣對顏色進行變換。每一像素的顏色值(一個表示為[紅,綠,藍,透明度] 的矢量) 都經過矩陣乘法 (matrix multiplated) 計算出的新顏色。

　　　用法：

　　　　類別： 濾鏡元素

　　　　允許的內容物： 任意數量、任意排序的下列元素：<animate>, <set>　

 

<svg width="100%" height="100%" viewBox="0 0 150 360"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <text x="70" y="50">Reference</text>
  <g>
    <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
  </g>


  <text x="70" y="120">matrix</text>

  <filter id="colorMeMatrix">
    <feColorMatrix in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>

  <g filter="url(#colorMeMatrix)">
    <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
  </g>


  <text x="70" y="190">saturate</text>

  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic"
      type="saturate"
      values="0.2" />
  </filter>

  <g filter="url(#colorMeSaturate)">
    <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
  </g>


  <text x="70" y="260">hueRotate</text>

  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic"
      type="hueRotate"
      values="180" />
  </filter>

  <g filter="url(#colorMeHueRotate)">
    <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
  </g>


  <text x="70" y="320">luminanceToAlpha</text>

  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic"
      type="luminanceToAlpha" />
  </filter>

  <g filter="url(#colorMeLTA)">
    <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
  </g>
</svg>

 

foOffset

　　該輸入圖像作為一個整體，在屬性dx和屬性dy的值指定了它的偏移量。

　　 用法：

　　　　類別： 濾鏡元素

　　　　允許的內容物： 任意數量、任意排序的下列元素：<animate>, <set>

feMerge

　　feMerge濾鏡允許同時應用濾鏡效果而不是按順序應用濾鏡效果。利用result存儲別的濾鏡的輸出可以實現這一點，然后在一個 <feMergeNode>子元素中訪問它。

　　 用法：

　　　　類別： 濾鏡元素

　　　　允許的內容物： 任意數量、任意排序的下列元素：<feMergeNode>

feMergeNode

　　feMergeNode元素拿另一個濾鏡的結果，讓它的父<feMerge>元素處理。

　　 用法： 

　　　　類別： 無

　　　　允許的內容物： 任意數量、任意排序的下列元素：<animate>, <set>

 

SVG相關資料網站：https://developer.mozilla.org/en-US/docs/Web/SVG