SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2791字，纯文字阅读大概需要4分钟。
内容图文
今天主要谈一下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
以上就是SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！
内容总结
以上是互联网集市为您收集整理的SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签全部内容，希望文章能够帮你解决SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。