我正在学习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);" />
答案 0 :(得分:2)
由于某些过滤器可能需要大量处理才能进行计算,因此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” - 并查看会发生什么。