图片添加

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

腾讯云AI代码助手
基于混元代码大模型的AI辅助编码工具

172

查看详情
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>

登录后复制

渐变

同样分为线性渐变和径向渐变
用法类比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>

登录后复制