边缘处的高斯模糊截止

Posted 2023-03-06

【中文标题】边缘处的高斯模糊截止

【英文标题】：Gaussian blur cutoff at edges

【发布时间】：2011-09-27 04:32:48

【问题描述】：

我正在为 android 上的绘图程序开发 svg 导出实用程序。我遇到了一个问题，即后面的模糊在形状边界之外被截断 - 看起来我需要调整 viewBox 的大小或增加边距或其他东西。有谁知道最好的方法吗？

测试文件的 url 是 here - 它下载是因为服务器上的 mime 类型设置不正确，我现在无法重新启动它 :(。文件中有嵌入的图像和字体，这就是为什么它很大。但如果你将它保存到磁盘，你可以用 chrome、ff 等打开...

给出了这个问题的一个放大的例子。注意橙色光晕上的方形边缘。

【参考方案1】：

过滤画布具有默认值：x=y=-10% 和 width=height=120%。您可以使用过滤器元素上的 x、y、宽度和高度属性来更改它们。

尝试设置更大的画布：

<filter x="-50%" y="-50%"  />

然而，由于画布更大，会出现性能损失。

【讨论】：

似乎对我没有影响。

糟糕，没关系，我是在 feGuassianBlur 元素上应用属性，而不是在 filter 元素上。它有效。

尝试将属性应用到过滤器元素。对我来说被切断的模糊没有影响。

谢谢，伙计，我正在阅读我能找到的所有文档，但没有任何效果......我仍然围绕着 SVG，每次我认为我遇到了一些类似的问题，并且我弄丢了...在您弄清楚问题后解决问题非常简单，因此感谢 -50% x 和 y 位置。因为很多人说添加到宽度和高度，但没有人说哦，是的，移动过滤器的起始位置以避免修剪。 @Tanggui 谢谢！你可以用几句话解释一个问题

如果您尝试在 html 中的内联 SVG 中执行此操作，Safari 存在一个错误，即过滤器不会使整个 svg 元素变大，因此截断仍然存在。解决方案是在 SVG 中添加一个不可见的元素（例如，带有 fill-opacity="0" 的矩形），具有相同的 x/y/width/height 属性。