SVG - Verschieben eines Kreises entlang eines Weges von einer animierten geraden Linie

Question

Ich versuche, eine einfache Animation eines Kreises zu tun, die mit einer Linie entlang bewegt, die auch animiert werden.

Meine aktuelle Methode für den Kreis bewegt verwendet und nur die mit den Start- und Zielkoordinaten der Linie zu und von Koordinaten übereinstimmt, ist es ein manueller und zeitaufwändiger Prozess.

lese ich auch, dass die SMIL-Animation mit wenig oder gar keiner Unterstützung in der Zukunft ist veraltet. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

Kann mir jemand eine effizientere Art und Weise, dies zu tun vorschlagen?

.line { 
 
    stroke: #bfbfbf; 
 
    stroke-width: 1; 
 
    fill: none; 
 
    animation: drawline 2s linear forwards; 
 
    -moz-animation: drawline 2s linear forwards; 
 
    -webkit-animation: drawline 2s linear forwards; 
 
} 
 

 
@keyframes drawline { 
 
    from { 
 
    stroke-dasharray: 0 400; 
 
    stroke-dashoffset: 0; 
 
    } 
 
    to { 
 
    stroke-dasharray: 400 400; 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59"> 
 

 
    <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="214" y2="30"></line> 
 
    
 
    <circle id="audit-circle" r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" /> 
 
    <text id="audit-text" font-family="Arial" font-size="13">A</text> 
 
    <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text> 
 
    <animate 
 
    xlink:href="#audit-circle" 
 
    attributeName="cx" 
 
    to="214" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
    <animate 
 
    xlink:href="#audit-circle" 
 
    attributename="cy" 
 
    to="30" 
 
    dur="1s" 
 
    fill="freeze" 
 
    /> 
 
    <animate 
 
    xlink:href="#audit-text" 
 
    attributeName="x" 
 
    from="155" 
 
    to="210" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
    <animate 
 
    xlink:href="#audit-text" 
 
    attributename="y" 
 
    from="240" 
 
    to="35" 
 
    dur="1s" 
 
    fill="freeze" 
 
    /> 
 

 
</svg>

Answer 1

Sie können es effizient, ein wenig mehr tun. Zum Beispiel müssen Sie nicht den Kreis und seinen Text unabhängig animieren. Auch IMO Sie machen Dinge kompliziert für sich selbst durch CSS und SMIL Animation zu mischen.

.line { 
 
    stroke: #bfbfbf; 
 
    stroke-width: 1; 
 
    fill: none; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59"> 
 

 
    <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="154" y2="238"></line> 
 

 
    <g id="audit-circle"> 
 
    <circle r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" /> 
 
    <text x="154" y="242" font-family="Arial" font-size="13">A</text> 
 
    </g> 
 

 
    <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text> 
 

 
    <animateTransform 
 
    xlink:href="#audit-circle" 
 
    attributeName="transform" 
 
    type="translate" from="0,0" to="56,-208" dur="1s" 
 
        additive="replace" fill="freeze"/> 
 
    <animate 
 
    xlink:href="#audit-line" 
 
    attributeName="x2" 
 
    from="154" 
 
    to="214" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
    <animate 
 
    xlink:href="#audit-line" 
 
    attributename="y2" 
 
    from="238" 
 
    to="30" 
 
    dur="1s" 
 
    fill="freeze" 
 
    /> 
 

 
</svg>