SVG（可縮放向量圖形）圖片新增、高斯模糊、漸層與g標籤

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

圖片添加

svg中也可以加入圖片

r​​rreee

注意這裡是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=300 height=300>
    <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>

filter id屬性定義一個濾鏡的唯一名稱

feGaussianBlur定義模糊效果

in 定義了由整個影像建立效果
（SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
）
stdDeviation 定義模糊量
rect元素的濾鏡屬性把元素連結到”f1”濾鏡

漸層

同樣分成線性漸層與徑向漸層

用法類比canvas的漸層

線性漸變

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

linearGradient的x1,y1,x2,y2定義了漸變起始和結束位置

顏色方位由stop標籤指定

注意XML單一標籤是要有「/」的，否則標籤無效

##徑向漸層

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

#radialGradient的cx，cy和r定義最外層圓fx和fy定義最內層圓

顏色同樣由stop標籤指定

g標籤

我們使用工具的時候

可能會在匯出程式碼中看到

其實這個XML標籤沒有什麼神奇的

它就相當於一個容器，我們可以為它內部的圖形指定相同的樣式
比如說顏色、座標系、濾鏡等等

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

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

snap.svg

 以上就是SVG（可縮放向量圖形）圖片添加、高斯模糊、漸變與g標籤的內容，更多相關內容請關注PHP中文網（www.php.cn ）！

#