SVG元素

SVG元素定义了一个2D卷积矩阵，用于滤镜效果，可以实现平滑、锐化、浮雕等各种效果。

属性

• in：指定输入源
• order：指定矩阵的宽高，如"3 3"表示一个3x3的矩阵
• kernelMatrix：指定卷积核矩阵
• divisor：指定卷积核计算的总和值，如"9"表示将卷积核所有值相加后除以9
• bias：指定卷积核的偏移值，如"0.5"
• targetX和targetY：用于指定卷积核应用时的目标像素位置
• edgeMode：指定超出原始图像的像素如何处理，'duplicate'表示复制边缘像素，'wrap'表示将原图像翻转并且使用重复的象素填充边缘，'none'表示超出部分不做处理
• kernelUnitLength：指定矩阵中每个单元格的物理距离，如"2 2"表示每隔2个单位比特是一个矩阵单元格
• preserveAlpha：指定卷积核计算是否考虑源图像矢量alpha通道，'true'表示计算时忽略alpha通道，'false'表示卷积核计算时应用alpha通道

代码示例

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
    <filter id="sharpen">
      <feConvolveMatrix in="SourceGraphic" order="3 3"
        kernelMatrix=" 0 -1  0
                      -1  5 -1
                       0 -1  0" divisor="1" bias="0"/>
    </filter>
  </defs>
  <rect x="10" y="10" width="100" height="100" fill="red" filter="blur"/>
  <rect x="120" y="10" width="100" height="100" fill="blue" filter="sharpen"/>
</svg>

效果展示