为何SVG滤镜#water超出多边形范围？如何限制其作用区域？

问题描述 #

当前SVG中，#water滤镜会覆盖多边形的整个边界矩形，而非仅作用于六边形内部。原代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2" width="100" height="100">
  <filter id='water' x='0%' y='0%' width='100%' height='100%'>
    <feTurbulence baseFrequency="1 10" result="NOISE"/>
    <feColorMatrix type="matrix" values="0  0  0  0  0
                                         0  0  0  0  0
                                         0  0  1  0  0
                                         0  0  0  1  0" />
  </filter>
  <g filter="url(#water)">
    <polygon points="1.0,0.0 0.5000000000000001,0.8660254037844386 -0.4999999999999998,0.8660254037844387 -1.0,1.2246467991473532e-16 -0.5000000000000004,-0.8660254037844384 0.5000000000000001,-0.8660254037844386"></polygon>
  </g>
  <g stroke="red" stroke-width="0.05" fill="transparent">
    <polygon points="1.0,0.0 0.5000000000000001,0.8660254037844386 -0.4999999999999998,0.8660254037844387 -1.0,1.2246467991473532e-16 -0.5000000000000004,-0.8660254037844384 0.5000000000000001,-0.8660254037844386"></polygon>
  </g>
</svg>

渲染时滤镜会填充整个矩形范围，无法限制在六边形内部。

解决方案 #

通过在滤镜中添加feComposite元素，将湍流噪声与原图形的Alpha通道结合，即可把滤镜效果限制在多边形内部。修改后的完整代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2" width="100" height="100">
  <filter id='water' x='0%' y='0%' width='100%' height='100%'>
    <feTurbulence baseFrequency="1 10" result="NOISE"/>
    <feColorMatrix type="matrix" values="0  0  0  0  0
                                         0  0  0  0  0
                                         0  0  1  0  0
                                         0  0  0  1  0" />
    <!-- 用原图形裁剪噪声，仅保留重叠区域 -->
    <feComposite in="SourceGraphic" in2="NOISE" operator="in" />
  </filter>
  <g filter="url(#water)">
    <polygon points="1.0,0.0 0.5000000000000001,0.8660254037844386 -0.4999999999999998,0.8660254037844387 -1.0,1.2246467991473532e-16 -0.5000000000000004,-0.8660254037844384 0.5000000000000001,-0.8660254037844386"></polygon>
  </g>
  <g stroke="red" stroke-width="0.05" fill="transparent">
    <polygon points="1.0,0.0 0.5000000000000001,0.8660254037844386 -0.4999999999999998,0.8660254037844387 -1.0,1.2246467991473532e-16 -0.5000000000000004,-0.8660254037844384 0.5000000000000001,-0.8660254037844386"></polygon>
  </g>
</svg>

原理说明 #

• feComposite的operator="in"规则是：仅保留第二个输入（in2即生成的噪声）与第一个输入（in即原图形SourceGraphic）重叠的区域，直接实现了滤镜效果的范围限制。
• 也可以用feMask实现类似效果，但feComposite在该场景下更简洁高效。

内容的提问来源于stack exchange，提问作者spraff