我似乎无法将此掩码用于SVG中的动画。这个代码出了什么问题？绿色箭头应从圆圈的最右侧屏蔽，以便箭头在接触时看起来被圆圈消耗。
<svg height="200" width="1200" viewBox="0 0 200 200">
<defs>
<mask id="mask1" x="0" y="0" width="700" height="110" >
<rect x="0" y="0" width="550" height="110" style="stroke:none; fill:white" />
<rect x="550" y="0" width="50" height="110" style="stroke:none; fill:black"/>
</mask>
</defs>
<polygon id="arrow" z-index="1" points="0,5 0,105 105,55" mask="url(#mask1)" fill="green">
<animateTransform attributeName="transform" type="translate" attributeType="XML" values="0, 0; 550, 0; 550, 0" keyTimes="0; .7; 1" dur="3s" repeatCount="indefinite" additive="sum"/>
<animate attributeName="opacity" values="1; 1; 0" keyTimes="0; .5; 1" dur="3s" repeatCount="indefinite" />
</polygon>
<circle z-index="1" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="gray"/>
<circle z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="none"/>
<circle id="greenCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillGreen" xlink:href="#greenCircle" attributeName="stroke-dasharray" values="154, 0, 154, 0; 0, 308, 0, 0; 0, 308, 0, 0" keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
<circle id="blackCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillBlack" xlink:href="#blackCircle" attributeName="stroke-dasharray" values="0, 154, 0, 154; 0, 154, 0, 154; 0, 0, 308, 0" dur="3s" keyTimes="0; 0.5; 1" repeatCount="indefinite" />
</circle>
</svg>变换也应用于遮罩，因此多边形移动时，遮罩也会移动。你需要在不移动的东西上设置口罩，例如
<svg height="200" width="1200" viewBox="0 0 200 200">
<defs>
<mask id="mask1" x="0" y="0" width="700" height="110" >
<rect x="0" y="0" width="550" height="110" style="stroke:none; fill:white" />
<rect x="550" y="0" width="50" height="110" style="stroke:none; fill:black"/>
</mask>
</defs>
<g mask="url(#mask1)" >
<polygon id="arrow" z-index="1" points="0,5 0,105 105,55" fill="green">
<animateTransform attributeName="transform" type="translate" attributeType="XML" values="0, 0; 550, 0; 550, 0" keyTimes="0; .7; 1" dur="3s" repeatCount="indefinite" additive="sum"/>
<animate attributeName="opacity" values="1; 1; 0" keyTimes="0; .5; 1" dur="3s" repeatCount="indefinite" />
</polygon>
</g>
<circle z-index="1" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="gray"/>
<circle z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="none"/>
<circle id="greenCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillGreen" xlink:href="#greenCircle" attributeName="stroke-dasharray" values="154, 0, 154, 0; 0, 308, 0, 0; 0, 308, 0, 0" keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
<circle id="blackCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillBlack" xlink:href="#blackCircle" attributeName="stroke-dasharray" values="0, 154, 0, 154; 0, 154, 0, 154; 0, 0, 308, 0" dur="3s" keyTimes="0; 0.5; 1" repeatCount="indefinite" />
</circle>
</svg>