Question

我有这个相当基本的SVG，垂直线穿过4个圆圈。我对垂直线的掩模与线本身具有相同的定义，唯一的区别是笔触颜色（在这种情况下为#fff），因为我希望能够透过掩模看到。但是，由于未知原因，掩模仍然表现为颜色为黑色，从而隐藏了元素。如果有人知道它为什么会这样，请告诉我。

<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>

P.S。刚刚开始修补SVG，但无论我在面具中定义的形状或我给出的形状是什么颜色，这个（元素消失）都会发生。

Answer 1

SVG与CSS不同，它在计算蒙版和滤镜的尺寸时不使用笔触宽度，因此您无法像水平或垂直线（零高度/零宽度边界框）一样遮罩形状）使用默认掩码参数。只需将“maskUnits =”userSpaceOnUse“添加到您的掩码元素中即可修复。

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

SVG：掩码无法按预期工作

1 个答案: