小编Cos*_*riu的帖子

SVG:遮罩无法正常工作

我有一个相当基本的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 …
Run Code Online (Sandbox Code Playgroud)

svg mask

3
推荐指数
1
解决办法
1378
查看次数

标签 统计

mask ×1

svg ×1