在SVG形状和clipPath上使用变形动画的问题

我创建了一个SVG图像，其中包含两个形状：一个山和一个月亮，并且想要对它进行动画处理，使其看起来像月亮从山后升起。但是，SVG需要透明，所以我创建了另一个山形作为月球的剪辑路径。在SVG形状和clipPath上使用变形动画的问题

月亮被修剪得很好，但问题是，一旦动画发生，月球的剪辑部分随之移动，因此最终看起来就像是一个部分月亮。这里有一个的jsfiddle显示这是怎么回事：

SVG代码：

<svg> 
    <defs> 
    <clipPath id="myClip"> 
     <path id="mountain-mask" class="st0" d="M0,0v90h94.9V0H0z M84.7,53.8H0.5v-3.2l18-26.9l4.9,8L41.3,0.9l13.3,22.7l7-13.1l23,40.2 
V53.8z"/> 

    </clipPath> 
</defs> 

<path id="moon" clip-path="url(#myClip)" d="M25,24.1c-0.1-0.2-0.3-0.3-0.5-0.3c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c0,0,0,0,0,0 
c0.3,0,0.5-0.2,0.5-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.4-0.4-2-2.2-2-4.3c0-2.4,2.1-4.4,2.1-4.4C25,24.5,25.1,24.3,25,24.1z M21.8,29.1 
c0,1.7,0.8,3.2,1.5,4.1c-1.8-0.5-3-2.2-3-4.1c0-1.9,1.3-3.6,3-4.1C22.6,25.9,21.8,27.4,21.8,29.1z"/> 

<path id="mountain" d="M15.4,35.7C15.4,35.7,15.4,35.7,15.4,35.7c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0,0h0c0,0,0,0,0,0 
c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.1,1.5l-8.1,14.3c-0.2,0.3-0.1,0.6,0.2,0.8c0.1,0,0.2,0.1,0.3,0.1c0,0,0,0,0,0 
c0,0,0,0,0,0c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l18.9-33.2l2.8,1.9c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.3,0.1 
c0,0,0,0,0,0h0c0,0,0,0,0,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.5,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1 
c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0c0,0,0,0,0.1,0l2.4-1.8l2.4,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1 
c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0c0,0,0,0,0.1,0l2.5-1.8l4,7c0,0,0,0,0,0L69,50.3c0.1,0.2,0.3,0.3,0.5,0.3 
c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-14.8-26l1-1.9l2.8,1.8c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0,0c0,0,0,0,0,0 
c0,0,0,0,0,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.5,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1h0 
c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0s0,0,0.1,0l2.3-1.7l16.3,28.3c0.2,0.3,0.5,0.4,0.8,0.2c0.3-0.2,0.4-0.5,0.2-0.8l-23.1-40 
c-0.1-0.2-0.3-0.3-0.5-0.3c-0.2,0-0.4,0.1-0.5,0.3l-5.6,10.9c0,0,0,0-0.1,0.1c0,0.1-0.1,0.2-0.1,0.2l-0.8,1.6L50.8,16 
c0,0,0-0.1,0-0.1c0,0,0,0,0,0L41.9,0.3c-0.2-0.4-0.8-0.4-1,0L32,15.9c0,0,0,0,0,0c0,0,0,0.1,0,0.1l-8.4,14.7l-4.5-7.5 
c-0.1-0.2-0.3-0.3-0.5-0.3c-0.2,0-0.4,0.1-0.5,0.3l-18,26.5C-0.1,50,0,50.3,0.3,50.5c0.3,0.2,0.6,0.1,0.8-0.2l11.3-16.6L15.4,35.7z 
M61.7,11.2l5.6,9.7l-2.1,1.5l-2.4-1.8c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0 
c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0l-2.8,1.8l-2.6-1.7L61.7,11.2z M41.4,1.8l8.1,14.3l-2.3,1.6l-2.4-1.8c0,0,0,0,0,0 
c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0,0,0,0,0l-2.4,1.8 
l-2.4-1.8c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1 
c0,0,0,0,0,0l-2.8,1.8L33.2,16L41.4,1.8z M18.5,24.6l4.4,7.2l-1.4,2.5l-2.3-1.7c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0 
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0l-2.8,1.8L13,32.7L18.5,24.6z"/> 
</svg>

CSS：

@keyframes rise { 
    0% { 
    transform: translateY(-20px); 
    } 

    50% { 
    transform: translateY(10px); 
    } 

    100% { 
    transform: translateY(-20px); 
    } 
} 

#moon { 
    animation: rise 3s ease-in-out infinite; 
}

来源

2017-04-04 Robert Pessagno

把月亮一组内，夹组和动画月亮如前：

<g clip-path="url(#myClip)"> 
    <path id="moon" d="..." /> 
</g>

来源

2017-04-04 04:05:48 ccprog

https://jsfiddle.net/zr71jaf2/1/ –

究竟是在找什么！谢谢！ –

在SVG形状和clipPath上使用变形动画的问题

回答

相关问题