Versuchen, diese spezifische SVG zu animieren

Ich habe diese SVG aus Adobe Illustrator exportiert.Versuchen, diese spezifische SVG zu animieren

<?xml-stylesheet href="star.css" type="text/css"?> 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 

    <g id="star"> 
     <path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7 
      c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7 
      C36.9,28.7,37.6,28.5,37.9,27.9z"/> 

     <path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8 
      L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6 
      L71.3,31.8z"/> 

     <path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1 
      c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7 
      c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/> 

     <path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1 
      l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1 
      C46,80.7,45.3,80.5,44.7,80.9z"/> 

     <path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6 
      c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z 
      "/> 
    </g> 

</svg>

Hier ist, was ich versuche es einfach nur zu erreichen, sollte von Punkt A nach Punkt B ziehen, beginnend mit 1 und endet mit dem 5.

Und das ist, was mein css sieht wie aus:

#star{ 
    fill-opacity: 0; 
    stroke: #37475B; 
    stroke-width: 1; 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: draw-star 10s linear forwards; 
} 

@keyframes draw-star { 
    to { 
    stroke-dashoffset: 0; 
    } 
}

Ich bin ziemlich neu in SVG-Animation oder sogar SVG selbst. Um ehrlich zu sein, habe ich keine Ahnung, was ich tue, ich habe versucht, nach einigen Tutorials zu suchen, aber es ist ziemlich hart und verwirrend, meine eigenen Punkte zu erstellen. Ich habe eine Menge Icons aus Illustrator exportiert, aber es scheint mir etwas zu exportieren fill keine einfache Punkt-zu-Punkt-Linie.

Ist das exportierte SVG möglich, um die obige Animation zu machen? Wenn ja, kann mir jemand mit einem CSS-Snipit helfen oder wenn die SVG in irgendeiner Weise bearbeitet werden muss, damit ich eine Basis zum Lernen habe? Vielen Dank!

Quelle

2016-10-04 galao

Sie können die animate auf jedem der Wege von Anfang an verwenden:

svg { 
 
    width: 200px; 
 
    padding: 5px; 
 
} 
 
#star{ 
 
    fill-opacity: 0; 
 
    stroke: #37475B; 
 
    stroke-width: 1; 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
 

 
    <g id="star"> 
 
     <path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7 
 
      c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7 
 
      C36.9,28.7,37.6,28.5,37.9,27.9z"/> 
 

 
     <path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8 
 
      L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6 
 
      L71.3,31.8z"/> 
 

 
     <path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1 
 
      c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7 
 
      c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/> 
 

 
     <path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1 
 
      l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1 
 
      C46,80.7,45.3,80.5,44.7,80.9z"/> 
 

 
     <path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6 
 
      c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z 
 
      "/> 
 
    </g> 
 
    <animate xlink:href="#star-1" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-1-anim" /> 
 
    <animate xlink:href="#star-2" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-2-anim" begin="+1.5s"/> 
 
    <animate xlink:href="#star-3" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-3-anim" begin="+3s"/> 
 
    <animate xlink:href="#star-4" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-4-anim" begin="+4.5s"/> 
 
    <animate xlink:href="#star-5" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-5-anim" begin="+6s"/> 
 
</svg>

Hoffe, es ist das, was Sie suchen.

Quelle

2016-10-04 11:39:49 Dekel

hallo @Dekel, vielen Dank für die schnelle Antwort. Die Sequenz der Animation ist perfekt, aber was ich brauche, ist nur ein einfacher Strich, ziemlich genau das Bild, das ich oben gepostet habe, und basiert auf dem vom Illustrator generierten SVG. – galao

Sie müssen ein paar Dinge beheben, wenn Sie möchten, dass dies funktioniert.

Erstens, um den CSS-Linienanimationstrick zu verwenden, müssen Sie Ihre Dreiecksformen ändern, um einen einzelnen Strich (dh zwei Linien) anstelle eines Umrisses um die Außenseite zu verwenden. Eine Erläuterung dazu finden Sie unter my answer on this other question.

Zweitens haben Sie fünf verschiedene Formen. Wenn Sie möchten, dass sie nacheinander nacheinander animieren, müssen Sie die Animationen zeitlich anpassen. Für die Animationen für die Pfade 2-5 muss eine Verzögerung angewendet werden. Sie können das mit der animation-delay Regel tun.

Demo

#star path { 
 
    fill: none; 
 
    stroke: #37475B; 
 
    stroke-width: 1; 
 
    stroke-dasharray: 190; 
 
    stroke-dashoffset: 190; 
 
    animation-name: draw-star; 
 
    animation-duration: 2s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes draw-star { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
#star-2 { 
 
    animation-delay: 2s; 
 
} 
 

 
#star-3 { 
 
    animation-delay: 4s; 
 
} 
 

 
#star-4 { 
 
    animation-delay: 6s; 
 
}

<svg width="300px" height="300px"> 
 
    <g id="star"> 
 
    <path id="star-1" d="M 100,90 L150,10 L 200,90" /> 
 
    <path id="star-2" d="M 210,100 L 290,150 L 210,200" /> 
 
    <path id="star-3" d="M 200,210 L150,290 L 100,210" /> 
 
    <path id="star-4" d="M 90,200 L 10,150 L 90,100" /> 
 
    </g> 
 

 
</svg>

Quelle

2016-10-04 12:19:47

hi @Paul Ich bemerkte, dass du deine eigenen Punkte gezogen hast, ist es nicht möglich, das SVG zu machen, das ich zur Verfügung stelle? – galao

Nein. Wie gesagt, Sie müssen es neu zeichnen, so dass jeder Sternpunkt von einem offenen Pfad (z. B. zwei geraden Linien) entfernt ist, anstatt von einem Pfad, der sich um die Innen- und Außenseite jedes Sternpunkts herum erstreckt. –

Versuchen, diese spezifische SVG zu animieren

Antwort

Verwandte Themen