You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.17 18:12:49