时间戳

首页 > 解决方案 > 如何计算 svg feGaussianBlur 的大小

svg - 如何计算 svg feGaussianBlur 的大小

问题描述

我正在尝试以编程方式确定过滤器的大小，以使用 feGaussianBlur 应用投影效果。我一直在搜索它，但找不到合适的方法。有没有办法计算一样。给定模糊、dx 和 dy 值？

<filter id="drop shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="x" result="result"/>
  <feOffset in="result" dx="dx" dy="dy" result="shadow"/>
  <feMerge>
     <feMergeNode in="shadow"/>
     <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

标签： svgblurdropshadow

解决方案

这并不完全准确，但假设 viewBox 与形状的尺寸相匹配 -> 对于较小的 stdDeviation 值（<15ish），模糊将在 5% 的不透明度（大约难以看到的地方）在 85% 左右以像素为单位的 stdDeviation 值 - 向上取整。换句话说 - 10 的 stdDeviation 模糊将在原始形状周围添加大约 9 个像素的模糊。

要计算适当的过滤器区域，您需要获取形状的 getBBox() 以找到其宽度和高度。向两者添加适当的 stdDeviation 填充。将 dx 和 dy 的绝对值分别添加到宽度和高度。将其表示为形状原始高度和宽度的百分比。从每个值中减去 1。现在你有了过滤区域的 -x% 和 -y% 。您的过滤器区域宽度和高度将为 100% + x% 和 100% + y%。

推荐阅读