Question

我正在学习SVG。我无法理解过滤器属性。为什么此示例代码中x和y的值为负。当我指定正值时，为什么我的内容会消失？

<defs>
<filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />  
</defs>

<rect x="20" y="24" width="90" height="90"
  style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />

Answer 1

由于某些过滤器可能需要大量处理才能进行计算，因此SVG会要求您指定计算过滤器的区域。显然，区域越小，计算得越快。

x，y，width和height属性定义了该过滤器区域。

您通常希望它尽可能小 - 只要它完全覆盖受过滤器影响的区域。对于大多数过滤器基元，过滤器区域可以与要过滤的元素大小相同。

然而feGaussianBlur不是其中之一。模糊使对象大于其原始大小，因此您需要在所有方面使滤镜区域更大。

我将x和y设为正值，然后形状消失

这是因为这些属性的默认坐标空间是filterUnits="objectBoundingBox"。因此，这些坐标应该在0和1之间。（0,0）对应于原始元素的左上角，（1,1）对应于右下角。

偶然地，您的坐标覆盖0到1之间的区域，因此过滤器可以正常工作。但是，如果您使x或y大于1，则过滤器区域不再与原始元素重叠。

如果你想使用像

这样的绝对坐标

x="-20" y="-20" width="200" height="200"

然后您需要更改为filterUnits="userSpaceOnUse"。

<svg viewBox="0 0 200 200">

  <defs>
    <filter id="blurFilter5" filterUnits="userSpaceOnUse"
            x="-20" y="-20" width="200" height="200">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
  </defs>

  <rect x="20" y="24" width="90" height="90"
        style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
</svg>

现在尝试将x从“-20”更改为其他内容 - 例如“40” - 并查看会发生什么。

当我在SVG过滤区域中指定正x / y时，为什么我的内容会消失？

1 个答案: