边界外的 SVG 过滤器 box/clip path/shape

Question

我有过滤器在 <g> 个带有剪辑路径的元素中工作。

    <g ref="backSphere" id="backSphere"></g>
    <g style="clip-path: url(#clip)">
        <use xlink:href="#backSphere" style="filter: url(#blur)"></use>
    </g>

是否有一种简单的方法来“反转”它，以便滤镜有效地应用于剪辑路径“外部”的所有内容？

我当前的用例是一个矩形，但也将不胜感激更一般的答案。

我知道在大多数情况下我可以：

用一个滤镜覆盖整个 SVG，然后尝试用另一个滤镜计算所应用滤镜的逆函数：由于计算的缘故并不理想，可能双滤镜性能受到影响，并且可能计算不准确。
创建一组零散的滤镜元素，在覆盖范围内拼凑出我想要的形状：不理想，因为单独定位，并且移动或更复杂的形状这将是一只熊。

Answer 1

反转剪辑路径，而不是滤镜。

SVG 剪辑路径可以包含多个图形图元，如两个矩形。在这种情况下，

the silhouettes of the child elements are logically OR’d together to create a single silhouette

但是如果你使用单个<path>元素，路径可以由多个子路径组成，然后被剪切的内容由clip-rule 属性.

<clipPath id="clip" clipPathUnits="userSpaceOnUse">
   <rect x="0" y="0" width="100" height="100"/>
   <rect x="30" y="30" width="40" height="40"/>
</clipPath>

只会剪辑到第一个较大的矩形。但是用等效的子路径交换矩形，

<clipPath id="clip" clipPathUnits="userSpaceOnUse">
   <path d="M0,0 h100 v100 h-100 z M30,30 h40 v40 h-40 z" clip-rule="evenodd"/>
</clipPath>

剪辑到两个矩形子路径之间的所有内容。

这就是您的解决方案：将覆盖整个视口（或至少是滤镜区域）的外部矩形添加到剪辑路径。

如果您想继续使用图形基元，可以使用 <mask> 而不是 clip-path。白色区域可见，黑色区域隐藏：

<mask id="clip">
   <rect x="0" y="0" width="100%" height="100%" fill="white"/>
   <rect x="30" y="30" width="40" height="40" fill="black"/>
</mask>

这还有一个额外的好处，就是您可以用百分比单位编写大矩形，这对响应行为很有用。

边界外的 SVG 过滤器 box/clip path/shape

SVG filters outside of a bounding box/clip path/shape

css

svg