SVG linearGradient mit Animation Keyframes zusammen

Question

Ich erstelle ein einfaches Beispiel, wo zwei Pfad sec1 und sec2 verwenden. Für beide Pfade verwende ich linearGradient mit ID step1 und step2. Erster Teil (sec1) funktioniert super, zweiter Teil (sec2) noch nicht.

Sec2 muss zuerst versteckt sein, dann Positionen und Maßstab ändern. Ich versuche dies durch Keyframing, kann aber nicht sec2 am Anfang verstecken. Auch wenn ich versuche, in linearGradient Attribut begin="step1.end;" es funktioniert nicht zu verwenden, und nicht nach dem Füllen sec1 ausgeführt.

Ich möchte wie eine Animationslinie erstellen, die von links nach rechts und dann von oben nach unten beginnen, mit der ersten Änderung sec2 Position und Skalierung (in ausblenden) nach diesem beginnen, zeichnen und zeigen Verlaufsanimation.

Mein Beispiel hier: https://jsfiddle.net/0gkrch42/

Answer 1

Sie haben zwei Hauptprobleme ...

1. Ihre zweite Animation versteckt nicht starten, weil Sie die Steigung hatte stattdessen Offset ab „40%‘

2. Das zweite Problem war, dass, wenn Sie id.end für Timing-Attribute verwenden, die id ein anderes <animation> Element verweisen muss, kein Grafikelement.

<svg id="Logo-Defs" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <linearGradient id="step1" x1="0" y1="0" x2="1" y2="0"> 
 
     <stop offset="40%" stop-opacity="1" stop-color="black"> 
 
     <animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" /> 
 
     </stop> 
 
     <stop offset="40%" stop-opacity="0" stop-color="black"> 
 
     <animate id="anim1" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" /> 
 
     </stop> 
 
    </linearGradient> 
 
    <linearGradient id="step2" x1="0" y1="0" x2="0" y2="1"> 
 
     <stop offset="0%" stop-opacity="1" stop-color="black"> 
 
     <animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" /> 
 
     </stop> 
 
     <stop offset="0%" stop-opacity="0" stop-color="black"> 
 
     <animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" /> 
 
     </stop> 
 
    </linearGradient> 
 

 
<g> 
 
     <path id="sec1" class="cls-1" d="M155.06,43V41.83A42.78,42.78,0,0,0,143.12,16.5c-10.62-11.07-26-12-26-12S10.86,5,3.3,5C3.27,5,.44.25.44.25L117.08.73C137,2,158,18.38,159.07,43,158.09,43,156.08,43,155.06,43Z" /> 
 
     <path id="sec2" class="cls-1" d="M159.22,129.83V43.18h-4.06q.11,43.42.22,86.84,0,1.89,0,3.78v.91h3.82Z" /> 
 
    </g> 
 
    
 
    </defs> 
 
</svg> 
 

 
<svg id="svg" class="Animate-Path" width="100%" height="100%" viewBox="0 0 512 650" xml:space="preserve"> 
 

 
    <use id="Draw-sec1" xlink:href="#sec1" fill="url(#step1)" /> 
 
    <use id="Draw-sec2" xlink:href="#sec2" fill="url(#step2)" /> 
 

 
    <!--<use class="Animate-Fill" xlink:href="#Logo-Group" /> --> 
 
</svg>