创建动画 SVG 路径

Question

我正在尝试绘制一个动画 SVG 路径到一个 div 块，该块还根据当前动画状态为其他元素的不透明度设置动画。 基本上类似于： https : //www.biggerpicture.agency/about-us#main在“我们的哲学”下。

我设法创建了我的六边形形状并使用 stroke-dashoffset 方法对其进行了动画处理，但我正在努力研究如何包含用于操纵其他一些 div 块的不透明度的动画。 如果你们能给我一个关于如何做到这一点的提示，那就太好了。

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100%" height="100%" viewBox="0 0 600 600" xml:space="preserve">
<path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/>
</svg>




<style>
.polygon {
        fill: none;
        stroke: white;
        stroke-width: 3;
        stroke-dasharray: 1650;
        stroke-dashoffset: 1650;
        animation-name: draw-polygon;
        animation-duration: 4s;
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
}    

@keyframes draw-polygon {
  to {
    stroke-dashoffset: 0;
  }
}

</style>

Answer 1

一种方法是为其他对象创建动画，并使用animation-delay让它们在线条达到您想要的长度时开始。

 .polygon { fill: none; stroke: black; stroke-width: 3; stroke-dasharray: 1650; stroke-dashoffset: 1650; animation-name: draw-polygon; animation-duration: 4s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: ease-in-out; } @keyframes draw-polygon { to { stroke-dashoffset: 0; } } .circle1, .circle2 { opacity: 0; animation-name: fade-in; animation-duration: 0.5s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: ease-in-out; } .circle1 { animation-delay: 1100ms; } .circle2 { animation-delay: 1500ms; } @keyframes fade-in { to { opacity: 1; } }

 <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400" height="400" viewBox="0 0 600 600" xml:space="preserve"> <path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/> <circle class="circle1" cx="538" cy="176" r="40"/> <circle class="circle2" cx="552" cy="438" r="40"/> </svg>