SVG:掩码无法按预期工作

Question

我有一个相当基本的 SVG，其中一条垂直线穿过 4 个圆圈。我用于垂直线的蒙版与线本身具有相同的定义，唯一的区别是笔触颜色(在这种情况下为 #fff)，因为我希望能够看穿蒙版。但是，不知什么原因， mask 仍然表现得好像颜色是黑色的，从而隐藏了元素。如果有人知道为什么会这样，请告诉我。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

         <defs>
            <mask id="education">
                <path class="through" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M200 325.6v42.5M200 325.6V44.2"/>
            </mask>
        </defs>

        <path class="arrow" fill="#C57773" d="M191.9 41.5l8.1-14 8.1 14"/>
        <path  style="mask: url(#education);" class="through" fill="none" stroke="#58595B" stroke-width="2" stroke-miterlimit="10" d="M200 325.6v42.5M200 325.6V44.2"/>
        <path class="circle2" fill="#C95147" d="M200 234.7c-4.6 0-8.3 3.7-8.3 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3z"/>

        <path class="circle1" fill="#C95147" d="M200 317.2c-4.6 0-8.3 3.7-8.3 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3z"/>

        <path class="circle3" fill="#C95147" d="M200 152c-4.6 0-8.3 3.7-8.3 8.3 0 4.6 3.7 8.3 8.3 8.3 4.6 0 8.3-3.7 8.3-8.3 0-4.5-3.7-8.3-8.3-8.3z"/>

        <path class="circle4" fill="#C95147" d="M200 67.1c-4.6 0-8.3 3.7-8.3 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3z"/>

</svg>

附言刚刚开始修改 SVG，但是无论我在蒙版中定义什么形状或给该形状赋予什么颜色，都会发生这种情况(元素消失)。

Answer 1

SVG 与 CSS 不同，它在计算 mask 和过滤器的尺寸时不使用笔划宽度，因此您无法使用默认值 mask 水平或垂直线(零高度/零宽度边界框)等形状掩码参数。只需将 "maskUnits="userSpaceOnUse"添加到您的掩码元素即可修复。

 <mask id="education" maskUnits="userSpaceOnUse">