Html 为什么SVG路径上的屏蔽未正确屏蔽？

我有一个SVG，其中有一个我试图屏蔽的路径

我有一个id为startCircle的圆标记和一个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>

我竖起一支笔来表示我在说什么

---

答案在TweenMax库中，包括：

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

这将通过设置a向右移动startOrder 100 px

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

变换在遮罩之后应用，它们始终是最后一个操作，在平移之前，路径完全位于遮罩形状内

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

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