圖片添加

svg中也可以加入圖片

rrreee

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

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

濾鏡原語

svg提供了許多濾鏡

feBlend
feColorMatrix
feComponentTransfer
feComposite
#feConvolveMatrix
feDiffuseLighting
#feDisplacementMap
feFlood
#feGaussianBlur
##feImage
#feMerge
feMorphology
#feOffset

圖形元素透過

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定義模糊效果

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

用法類比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