मैंने एक एसवीजी छवि बनाई है जिसमें दो आकार हैं: एक पहाड़ और एक चंद्रमा, और इसे एनिमेट करना चाहता हूं ताकि ऐसा लगे कि चंद्रमा पहाड़ के पीछे से बढ़ रहा है। हालांकि, एसवीजी को पारदर्शी दिखने की जरूरत है, इसलिए मैंने चंद्रमा के लिए एक क्लिप पथ के रूप में काम करते हुए एक और पहाड़ी आकार बनाया।

चंद्रमा ठीक हो जाता है, लेकिन समस्या यह है कि एक बार एनीमेशन होने के बाद, चंद्रमा के कटे हुए हिस्से इसके साथ चलते हैं, इसलिए यह आंशिक चंद्रमा की तरह दिखता है। क्या हो रहा है यह दिखाने के लिए यहां एक JSfiddle है:

https://jsfiddle.net/zr71jaf2/

एसवीजी कोड:

<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>

सीएसएस:

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

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

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

#moon {
  animation: rise 3s ease-in-out infinite;
}
0
Robert Pessagno 4 अप्रैल 2017, 04:27

1 उत्तर

सबसे बढ़िया उत्तर

चंद्रमा को एक समूह के अंदर रखें, समूह को क्लिप करें और चंद्रमा को पहले की तरह चेतन करें:

<g clip-path="url(#myClip)">
    <path id="moon" d="..." />
</g>
2
ccprog 4 अप्रैल 2017, 07:05
वास्तव में क्या ढूंढ रहा था! आपको धन्यवाद!
 – 
Robert Pessagno
4 अप्रैल 2017, 19:06