如何使一个移动的svg形状消失在静态剪切路径后面?

时间:2017-08-14 13:17:25

标签: svg clip-path

大家好我是动画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>

0 个答案:

没有答案