我想模糊图像的角落,同时保持中心清晰。排除了使用 cssbackdrop-blur()
的可能性,因为 Firefox 不支持它。在模糊的图像上添加清晰的图像,然后掩盖第一个图像也是不可行的,因为最后我想用 three.js 场景修改静态图像。
我尝试遵循本指南,但使用径向渐变而不是固定带。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blurlayer" width="100%" height="100%">
<feGaussianBlur stdDeviation="4" result="blur"/>
<radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask">
<stop offset="0%" stop-color="white" stop-opacity="1" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
</radialGradient>
<feComposite in="blur" in2="mask" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image filter="url(#blurlayer)" x="0" y="0" width="100%" height="100%" xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg"/>
</svg>
这不起作用。谁能帮我找出原因?
如果它对任何人有帮助,我发布了codepen。
SVG 问题的松散翻译- mask feGaussianBlur with RadialGradient by @morph3us。
您需要做更多的工作-您不能放在
radialGradient
过滤器的中间-过滤器内只允许过滤器基元,并且您需要导入要使用的任何图像/形状feImage
。此外,当使用
feComposite / in
- 进行遮罩时,“in”运算符仅使用 Alpha 通道(与使用亮度的真实遮罩不同),因此您可以使用具有可变不透明度的黑/黑渐变。最后,由于 Firefox 内部不支持 Fragment ID
feImage
,所以如果您需要 Firefox 支持,您必须在内容中定义您的掩码并通过feImage
.这使得过滤器不可重复使用,但如果是一次,那很好。
如果你真的想更广泛地使用这个过滤器,你可以定义一个带有渐变填充的矩形,然后将其转换为完整的 SVG 图像,然后通过
data: uri внутри feImage
.这是更多的工作(在我看来,转义规则
svg + xml data URI
总是错误的),所以我没有在这里做。FWIW - 本指南完整且正确。
译者注:
FWIW是最礼貌的文字缩写之一,代表“我不知道这有多重要。
这是问题中给出的指南的链接。
更新
下面是 data: uri: version 的样子(请注意,我必须稍微增加过滤内容的大小,以便过滤器会剪切由反转引起的边缘伪影)。
来自 @Michael Mullany的免费翻译 答案。
数据:uri 是 SVG 的 base64 编码版本。