SVG渐进线绘制动画

-1

我需要创建一个简单的直线，通过svg渐进绘制动画。但是对此我很陌生，因此无法继续。我想要的输出是一个中心的图像，5条直线从中延伸出来。谁能帮我？SVG渐进线绘制动画

2015-06-09 sjworkshop

从图像中生长出5条直线？你能解释一下吗？让它变得不像外星人那样 –

http://jakearchibald.com/2013/animated-line-drawing-svg/ – Ian

我做的方式是在中风dashoffset属性的动画，其中设置最初是线的长度（所以他们invisibile）：

<?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/

来源

2015-06-09 13:40:48

SVG渐进线绘制动画

回答

相关问题