SVG - アニメーション直線のパスに沿って円を移動する

Question

アニメーションされている線とともに移動する円の単純なアニメーションを作成しようとしています。

私の現在の円の移動方法は、toとfromの座標をラインの開始座標と終了座標とを使用して一致させているだけです。これは手作業で時間のかかる処理です。

私は、SMILアニメーションが将来的にはほとんどサポートされないか、またはサポートされなくなることを読んでいました。 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

誰でもこれを行うより効率的な方法を提案できますか？

.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

あなたは、もう少し効率的にそれを行うことができます。たとえば、円とそのテキストを独立してアニメートする必要はありません。また、IMOでは、CSSアニメーションとSMILアニメーションを混在させることで、複雑な作業をしています。

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