今天主要談一下SVG的特殊效果

其實和canvas都是差不多的，只不過是利用XML標簽

用的不是很多但是以防以后萬一用到還是整理一下

圖片添加

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元素中

fill="red" filter="url(#f1)">

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

feGaussianBlur 定義模糊效果

in 定義了由整個圖像創建效果

(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |

< filter-primitive-reference >)

stdDeviation 定義模糊量

rect元素的濾鏡屬性把元素鏈接到”f1”濾鏡

漸變

同樣分為線性漸變和徑向漸變

用法類比canvas的漸變

線性漸變

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

顏色方位由stop標簽指定

注意XML單標簽是要有“/”的，否則標簽無效

徑向漸變

radialGradient的cx，cy和r定義最外層圓

fx和fy定義最內層圓

顏色同樣由stop標簽指定

g標簽

我們在使用工具的時候

可能會在導出代碼中看到

其實這個XML標簽沒有什么神奇的

它就相當于一個容器，我們可以為它內部的圖形指定相同的樣式

比如說顏色、坐標系、濾鏡等等

最后推薦給大家一個svg庫snap.svg

可以讓我們像jQuery操作DOM一樣操作SVG

snap.svg

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

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的g标签 怎么设置svg_SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。