我正在使用要在路径上使用的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,1,-3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,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,56%)" filter="url(#dark)" fill="hsl(207,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,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>
过滤器应用于三个路径:两个正方形和一个圆形。但是圆圈被剪掉了。
如果我使用objectBoundingBox
,则圆圈将完全呈现。但这不是一个选择,因为我也想在没有尺寸的直线上使用滤镜。
如果我使用过滤器的x
和y
,例如两者都使用-10
,那么它也可以正常工作。
我的过滤区域有问题吗?我的理解是,它完全覆盖了SVG,因此任何使用过滤器的内容都不应被裁剪。
还是我不知道userSpaceonUse
不支持的用例?