应用蒙版后奇怪的svg路径裁剪

Question

我有四条路径（简化为直线），其中笔画= 34，其中两条（2,4）空掩模（100％x100％填充白色）被应用。所有类型的路径都会在蒙版应用后垂直和水平裁剪。

有人能告诉我这里发生了什么，以及如何避免这种裁剪？

Source SVG file

感谢。

Answer 1

这是由于maskUnits属性的默认值。如果您未指定maskUnits，则默认为objectBoundingBox，以及＆lt; mask＆gt;的x，y，宽度和高度分别为-10%, -10%, 120%, 120%（如果未明确设置为其他任何内容）。这一起导致你看到的裁剪区域。

您似乎希望从示例源中判断maskUnits="userSpaceOnUse"。但请注意，您可能希望使用＆lt; clipPath＆gt;而不是＆lt; mask＆gt;除非你需要做渐变淡化或其他高级裁剪形状。使用＆lt; clipPath＆gt; （从性能的角度来看，相应的属性clip-path）通常更好。