时间戳

首页 > 解决方案 > svg过滤器的适当大小

svg - svg过滤器的适当大小

问题描述

我在 svg 中使用了一个非常简单的高斯模糊：

<filter id="filter2" x="-10%" y="-10%" width="120%" height="120%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
</filter>

这个效果基本上是每边15px宽（之后模糊太弱了）。如何在过滤器大小（x、y、宽度、高度）中正确编码，以便我可以将过滤器重用于任意元素？特别是我有一些小圆圈（大约 10 像素宽）和一些更大的多边形（几百像素宽）。 x并且y很容易，我可以将它们设置为-15. 但是，width和height都是一个问题。120%对于小元素来说是不够的，对于更大的元素来说太多了。我正在将 svg 转换为 pdf，这会导致巨大的利润。

理想情况下，我想设置类似100% + 15px. 有没有办法做到这一点？

标签： svgsvg-filters

解决方案

您不能在过滤器尺寸声明中直接使用混合尺寸（但是 - SVG2 可能会 - 不确定）。今天，您必须选择 % 或绝对单位（objectBoundingBox 或 userSpaceOnUse），因此如果您想在不同尺寸的形状上实现固定尺寸溢出，则需要定义多个不同尺寸的过滤器。至少它没有太多额外的文件重量。

一种替代方法是仅使用默认过滤器边距（周围 +/- 10%）并更改为 std Deviation 的 % 大小，如下所示：

<filter id="filter2" primitiveUnits="objectBoundingBox">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3%"/>
</filter>

它将以绝对值创建可变大小的模糊 - 但您只需要一个过滤器声明。

推荐阅读