SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签

最新推荐文章于 2024-02-26 10:33:32 发布

VIP文章刻刻帝丶

最新推荐文章于 2024-02-26 10:33:32 发布

阅读量3.7k

点赞数 5

分类专栏： Web前端 HTML/H5 HTML5 文章标签：图片 svg 矢量图 xml

本文为博主原创文章，转载请添加原文地址，需要大厂内推的+我脉脉哦：丛培森

本文链接：https://blog.csdn.net/q1056843325/article/details/54582299

版权

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

今天主要谈一下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给我们提供了很多滤镜

使用filter标签来定义滤镜，而且滤镜必须有id标识
图形元素通过 filter = "url(#id)" 来引用滤镜

使用滤镜可以构建绚丽的图案
我们主要来看一下这个feGaussianBlur高斯模糊滤镜

#高斯模糊
feGaussianBlur用于创建模糊效果
滤镜定义在defs元素中

<svg width=100 height=100>
  <defs

关注