SVG掩码渲染不正确

SVG掩码渲染不正确,svg,mask,Svg,Mask,下面是一个简单的SVG掩码(): 这将产生以下输出: 在我看来,这是错误的:红线丢失了。根据遮罩形状,红线应出现在绿线的左侧,但中心部分已移除。然而,根本没有划定红线 我花了很多时间研究SVG掩码的文档,但我看不到这里的问题。如果有人能看出问题所在,我将非常感谢他的洞察力。问题不可能与遮罩的坐标系有关(通常是一个令人困惑的区域),因为遮罩的蓝色矩形被正确渲染。遮罩的默认设置是使用objectBoundingBox单位,在这种情况下,必须使用 如果适用图元的几何图形没有宽度或高度,例如水平线

下面是一个简单的SVG掩码():


这将产生以下输出:

在我看来,这是错误的:红线丢失了。根据遮罩形状,红线应出现在绿线的左侧,但中心部分已移除。然而,根本没有划定红线


我花了很多时间研究SVG掩码的文档,但我看不到这里的问题。如果有人能看出问题所在,我将非常感谢他的洞察力。问题不可能与遮罩的坐标系有关(通常是一个令人困惑的区域),因为遮罩的蓝色矩形被正确渲染。

遮罩的默认设置是使用objectBoundingBox单位,在这种情况下,必须使用

如果适用图元的几何图形没有宽度或高度,例如水平线或垂直线,则不应使用关键字objectBoundingBox,即使该线在查看时由于笔划宽度非零而具有实际厚度,因为笔划宽度在边界框计算中被忽略。如果适用图元的几何体没有宽度或高度,并且指定了objectBoundingBox,则将忽略给定的效果(例如渐变或过滤器)


缺少的形状没有高度或宽度,因为它们只能通过笔划才能看到。

遮罩的默认设置是使用objectBoundingBox单位,在这种情况下,必须使用

如果适用图元的几何图形没有宽度或高度,例如水平线或垂直线,则不应使用关键字objectBoundingBox,即使该线在查看时由于笔划宽度非零而具有实际厚度,因为笔划宽度在边界框计算中被忽略。如果适用图元的几何体没有宽度或高度,并且指定了objectBoundingBox,则将忽略给定的效果(例如渐变或过滤器)

缺少的形状没有高度或宽度,因为它们只能通过笔划才能看到

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -400 600 600">

  <!-- Here I define the mask, a white rectangle with a strip removed -->
  <defs>
    <mask id="mymask">
      <rect x="100" y="-200" width="200" height="100" fill="white"/>
      <path d="M 250 -150  L 150 -150" stroke="black" fill="none" stroke-opacity="1" fill-opacity="1" stroke-width="25"/>
    </mask>
  </defs>

  <!-- This masked blue rectangle is displayed correctly, and lets us see where the mask is -->
  <rect x="-100" y="-300" width="500" height="500" fill="blue" fill-opacity="0.2" mask="url(#mymask)"/>

  <!-- This green vertical line is not masked, and is drawn on top of the blue rectangle -->
  <path d="M 220 -110 L 220 -190" stroke="green" stroke-opacity="0.5" stroke-width="10" fill="none"/>

  <!-- INCORRECT - This masked red line should be drawn to the left of the green line, but it does not appear -->
  <path d="M 180 -110 L 180 -190" stroke="red" stroke-width="10" mask="url(#mymask)"/>

</svg>