SVG - 将一个圆沿动画直线

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图做的，随着那也正在动画线移动的圆的简单动画的路径。SVG - 将一个圆沿动画直线

我的用于移动使用圆，只是匹配当前方法中的，并从与该行的开始和结束坐标的坐标，这是一个手动和耗时的过程。

我也读了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>

回答：

可以多一点有效地做到这一点。例如，您不需要独立设置动画圈和文本的动画。另外，通过混合使用CSS和SMIL动画，IMO可以让自己变得更加复杂。

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

以上是 SVG - 将一个圆沿动画直线 的全部内容， 来源链接： utcz.com/qa/257280.html

回到顶部