SVG Mask置于负坐标时异常遮挡内容的技术问询
SVG Mask 在负Y空间下的截断异常
两段SVG代码逻辑完全一致:均使用与目标polyline点位完全重合的白色SVG Mask,理论上不应产生任何遮挡效果。但实际运行时出现明显差异:
第一段代码(Mask处于Y负空间,范围-252至252)
运行时目标线条会被部分截断:
<svg viewBox="-410 -377 820 709"> <circle cx="122" cy="-252" r="5" fill="red"/> <polyline points="122,252 122,-252" style="stroke: rgb(79, 64, 255);" mask="url(#mask)"/> <mask maskUnits="userSpaceOnUse" id="mask"> <polyline points="122,252 122,-252" fill="white" stroke-width="2" stroke="white" /> </mask> </svg>
第二段代码(整体上移300px,所有元素处于Y正空间)
运行时目标线条正常显示:
<svg viewBox="-410 -77 820 709"> <circle cx="122" cy="52" r="5" fill="red"/> <polyline points="122,552 122,52" style="stroke: rgb(79, 64, 255);" mask="url(#mask)"/> <mask maskUnits="userSpaceOnUse" id="mask"> <polyline points="122,552 122,52" fill="white" stroke-width="2" stroke="white" /> </mask> </svg>
仅有的区别是第一段的Mask位于Y负空间,第二段则处于正空间。红色圆形可以证明该问题并非由viewBox裁剪导致。
内容的提问来源于stack exchange,提问作者jekelija
相关产品推荐
相关产品推荐

