Question

我有一个SVG，其中包含我要屏蔽的路径。

我有一个id为startCircle的circle标签和一个id为startOrder的路径。第一圈在起作用，路径在行，但我不确定为什么。

<svg id="wawa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
            <style>
                .st0 {
                    fill: #fff
                }

                .st5 {
                    fill: #c32034
                }
            </style>

            <defs>
                <mask id="button-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
                    <path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="#fff" />

               </mask>

            </defs>
            <path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25"/>
            <path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
            <path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />

            <path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
            <circle id="startCircle" cx="110" cy="110" r="100" fill="#9c6" mask="url(#button-mask)" />

        </svg>

我设置了一支笔来展示我在说什么

codepen

Answer 1

答案在您包含的TweenMax库中：

TweenMax.set( '#startOrder',{x:"+=100"});

通过设置a，将#startOrder向右移动100像素

transform="matrix(1,0,0,1,100,0)"

在蒙版之后应用变换（它们始终是最后一个操作），并且在平移之前，路径完全位于蒙版形状内。

您可以通过在组内移动路径并将蒙版应用于组来解决此问题：

<g mask="url(#button-mask)">
    <path id="startOrder" ... />
</g>

为什么SVG路径上的遮罩无法正确遮罩？

1 个答案: