我正在使用我想在路径上使用的SVG过滤器。 由于我的路径可能是直线，因此我使用userSpaceOnUse作为过滤器单元。为了确保路径不会被剪裁，我确保我的过滤器区域足够大。
<svg width="200px" height="200px" viewbox="0 0 200 200">
<defs>
<filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
</filter>
</defs>
<path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
<path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>过滤器应用于三个路径：两个正方形和圆形。但是，圆圈被剪掉了。
如果我使用objectBoundingBox则圆将完全渲染。但是，这不是一个选项，因为我还想在没有尺寸的直线上使用过滤器。
如果我使用过滤器的x和y，例如两者的-10，它也可以正常工作。
我的筛选器区域有问题吗？我的理解是它完全覆盖了 SVG，因此不应裁剪任何使用过滤器的内容。 或者这是一个我不知道的userSpaceOnUse不支持的用例？
将平移更改为 (0,0( 而不是 (100,100( 查看形状在画布上的位置。
<svg width="200px" height="200px" viewbox="0 0 200 200">
<defs>
<filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
</filter>
</defs>
<path transform="translate(0,0)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
<path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>翻译它不会改变它最初绘制在过滤器区域的上方和左侧。我们可以通过更改过滤器的 x 和 y 值来移动过滤器来解决这个问题......
<svg width="200px" height="200px" viewbox="0 0 200 200">
<defs>
<filter filterUnits="userSpaceOnUse" id="dark" x="-10" y="-10" width="200" height="200">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
</filter>
</defs>
<path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
<path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>