Question

我需要通过svg创建一个简单的直线，渐进式绘图动画。但我是新手，因此无法继续。我想要的输出是中心的图像和5条直线。任何人都可以帮助我吗？

Answer 1

我这样做的方法是使用stroke-dashoffset属性上的动画，你最初将其设置为行的长度（因此它们是不可见的）：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="540pt" height="511pt" viewBox="0 0 540 511" version="1.1">
<rect x="0" y="0" width="540" height="511" style="fill:rgb(100%,100%,100%);fill-opacity:1;stroke:none;"/>
   <g id='lines' stroke="black" style="stroke-dasharray:100;stroke-dashoffset:100">
    <path d="M 200 250 l100 0" transform='rotate(72,200,250)'/>
    <path d="M 200 250 l100 0" transform='rotate(144,200,250)'/>
    <path d="M 200 250 l100 0" transform='rotate(216,200,250)'/>
    <path d="M 200 250 l100 0" transform='rotate(288,200,250)'/>
    <path d="M 200 250 l100 0"/>
    <animate attributeName="stroke-dashoffset" fill="freeze" dur="5s" values="100;0;"/>
   </g>
</svg>

请点击此处了解更多信息：https://css-tricks.com/svg-line-animation-works/

SVG渐进线条绘制动画

1 个答案: