SVG（可縮放矢量圖形）圖片添加、高斯模糊、漸變與g標籤

今天主要談一下SVG的特殊效果
其實和canvas都是差不多的，只不過是利用XML標籤
用的不是很多但是以防以後萬一用到還是整理一下

圖片添加

svg中也可以添加圖片

<svg width=300 height=300>
    <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image>
</svg>

注意這裏是image標籤而不是我們html中的img標籤

xlink:href指定資源路徑
x,y 圖片座標位置
height,width 圖片在svg中顯示的寬高

濾鏡原語

svg給我們提供了很多濾鏡

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

使用filter標籤來定義濾鏡，而且濾鏡必須有id標識
圖形元素通過 filter = "url(#id)" 來引用濾鏡

使用濾鏡可以構建絢麗的圖案
我們主要來看一下這個feGaussianBlur高斯模糊濾鏡

高斯模糊

feGaussianBlur用於創建模糊效果
濾鏡定義在defs元素中

<svg width=100 height=100>
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15">
    </filter>
  </defs>
  <rect width="100" height="100" stroke="blue" stroke-width="3"
  fill="red" filter="url(#f1)">
</svg>

filter id屬性定義一個濾鏡的唯一名稱
feGaussianBlur 定義模糊效果
in 定義了由整個圖像創建效果
（SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
< filter-primitive-reference >）
stdDeviation 定義模糊量
rect元素的濾鏡屬性把元素鏈接到”f1”濾鏡

漸變

同樣分爲線性漸變和徑向漸變
用法類比canvas的漸變

線性漸變

<svg widht=300 height=300>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad1)" />
</svg>

linearGradient的 x1,y1,x2,y2定義了漸變起始和結束位置
顏色方位由stop標籤指定
注意XML單標籤是要有“/”的，否則標籤無效 <stop />

徑向漸變

<svg width=300 height=300>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:0" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad2)" />
</svg>

radialGradient的cx，cy和r定義最外層圓
fx和fy定義最內層圓
顏色同樣由stop標籤指定

g標籤

我們在使用工具的時候
可能會在導出代碼中看到
其實這個XML標籤沒有什麼神奇的
它就相當於一個容器，我們可以爲它內部的圖形指定相同的樣式
比如說顏色、座標系、濾鏡等等

<svg width=300 height=300 viewbox="0 0 30 30">
    <g stroke="red">
        <path d="M 5 10 L 25 10"></path>
        <path d="M 5 15 L 25 15"></path>
        <path d="M 5 20 L 25 20"></path>
    </g>
</svg>

最後推薦給大家一個svg庫snap.svg
可以讓我們像jQuery操作DOM一樣操作SVG
snap.svg

==主頁傳送門==