大家好我是动画svgs的新手,我想为一个形状设置动画,使它消失在静态剪切路径后面/中。我只是设法通过使用剪切路径裁剪对象,但路径与对象一起移动。如何通过仅使用SMIL来解决这个问题? (在后面更精确的版本中,我希望管子在孔中消失)
的
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(750,105)">
<ellipse cx="30" cy="162" rx="44" ry="28"
style="stroke:#FEB102;
stroke-width:2;
fill:#F7CB1B"/>
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="400" height="120" />
</clipPath>
</defs>
<g clip-path="url(#cut-off-bottom)">
<path d="M0,15, L0,160 A18,10 0 0,0 60,160 L60,15"
style="stroke:#BB3368;
stroke-width:2;
fill:#EE468E
"/>
<ellipse cx="30" cy="15" rx="30" ry="15"
style="stroke:#BB3368;
stroke-width:2;
fill:#EE468E"/>
<animateMotion path="M0,120 L0,0 L0,120"
begin="0s"
dur="4s"
repeatCount="indefinite"
/>
</g>
</g>
</svg>
的