SVG:遮罩无法按预期工作 [英] SVG: Mask not working as expected

问题描述

我有一个相当基本的SVG，它的垂直线经过4个圆圈.我对垂直线使用的蒙版与线条本身具有相同的定义，唯一的区别是笔触颜色(在这种情况下为#fff)，因为我希望能够看透蒙版.但是，由于未知原因，遮罩仍然像黑色一样起作用，从而隐藏了该元素.如果有人知道为什么会这样，请告诉我.

I have this rather basic SVG with a vertical line going through 4 circles. The mask that I have for the vertical line has the same definition as the line itself, the only difference being the stroke color (#fff in this case) because I want to be able to see through the mask. But, for unknown reasons, the mask still acts as if the color is black, thus hiding the element. If anyone knows why it's behaving like this, please let me know.

<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进行修补，但是无论我在口罩中定义什么形状或给该形状赋予什么颜色，这种(消失的元素)都会发生.

P.S. Just started tinkering around with SVG, but this (the element dissapearing) happens no matter what shape I define in the mask or what color I give that shape.

推荐答案

SVG与CSS不同，SVG在计算蒙版和滤镜的尺寸时不使用笔触宽度，因此您无法蒙版像使用默认遮罩参数的水平或垂直线(零高度/零宽度边界框).只需将"maskUnits =" userSpaceOnUse添加到您的mask元素即可修复.

SVG is not like CSS, it doesn't use the stroke-width when calculating dimensions for masks and filters, so you can't mask a shape like a horizontal or vertical line (zero-height/zero-width bounding box) using default mask parameters. Just add "maskUnits="userSpaceOnUse" to your mask element to fix.

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

这篇关于SVG:遮罩无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！