我有一个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>
我支了一支钢笔来展示我所说的
代码笔
答案在您包含的TweenMax库中：
TweenMax.set( '#startOrder',{x:"+=100"});
这通过设置将#startOrder向右移动100 px
transform="matrix(1,0,0,1,100,0)"
变换在遮罩之后应用(它们始终是最后一个操作(，在平移之前，路径完全位于遮罩形状内。
您可以通过移动组内的路径并将掩码应用于组来解决此问题：
<g mask="url(#button-mask)">
<path id="startOrder" ... />
</g>