今天主要谈一下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元素中

filter id属性定义一个滤镜的唯一名称
feGaussianBlur 定义模糊效果
in 定义了由整个图像创建效果
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
)
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)!










