如何在 pie/donut 图表中按 SMIL/CSS 顺序设置多个 SVG 路径的动画

Question

我有一个 svg 组，其中包含一系列路径，这些路径代表饼图的不同区域，这些路径由圆形标记覆盖，图形显示为圆环图。

<svg width="71" height="70" xmlns="http://www.w3.org/2000/svg">
    <g class="graph-arc" transform="translate(1,1)">
        <path stroke="#3f88c5" fill="#3f88c5" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(225, 34.5, 34.5)"></path>
        <path stroke="#3f88c5" fill="#3f88c5" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(238.5, 34.5, 34.5)"></path>
        <path stroke="#3A8DC3" fill="#3A8DC3" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(252, 34.5, 34.5)"></path>
        <path stroke="#3593BF" fill="#3593BF" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(265.5, 34.5, 34.5)"></path>
        <path stroke="#3398BE" fill="#3398BE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(279, 34.5, 34.5)"></path>
        <path stroke="#3398BE" fill="#3398BE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(292.5, 34.5, 34.5)"></path>
        <path stroke="#359DBB" fill="#359DBB" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(306, 34.5, 34.5)"></path>
        <path stroke="#36A3B9" fill="#36A3B9" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(319.5, 34.5, 34.5)"></path>
        <path stroke="#36A3B9" fill="#36A3B9" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(333, 34.5, 34.5)"></path>
        <path stroke="#38A8B6" fill="#38A8B6" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(346.5, 34.5, 34.5)"></path>
        <path stroke="#39ADB4" fill="#39ADB4" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(360, 34.5, 34.5)"></path>
        <path stroke="#39ADB4" fill="#39ADB4" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(373.5, 34.5, 34.5)"></path>
        <path stroke="#3BB3B2" fill="#3BB3B2" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(387, 34.5, 34.5)"></path>
        <path stroke="#3DB8AE" fill="#3DB8AE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(400.5, 34.5, 34.5)"></path>
        <path stroke="#3DB8AE" fill="#3DB8AE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(414, 34.5, 34.5)"></path>
        <path stroke="#3EBDAD" fill="#3EBDAD" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(427.5, 34.5, 34.5)"></path>
        <path stroke="#40C3AA" fill="#40C3AA" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(441, 34.5, 34.5)"></path>
        <path stroke="#40C3AA" fill="#40C3AA" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(454.5, 34.5, 34.5)"></path>
        <path stroke="#00c8a8" fill="#00c8a8" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(468, 34.5, 34.5)"></path>
        <path stroke="#00c8a8" fill="#00c8a8" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55386505302874, 0.9532377462801749 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(481.5, 34.5, 34.5)"></path>
        <path stroke="#e5e5e5" fill="#e5e5e5" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 34.5, 0 z" xmlns="http://www.w3.org/2000/svg" transform="rotate(495, 34.5, 34.5)"></path>
    </g>
    <circle r="25.875" cx="35.5" cy="35.5" fill="#fff"></circle> . 
</svg>

我希望整体效果是这样的：https://codepen.io/seanstopnik/pen/GqHng

有很多使用 stroke-dasharray 作为线条的例子，但我还没有找到任何可以为多条路径设置动画的东西！最好的方法是什么？

Answer 1

正如 Temani Afif 评论的那样，使用多路径并不是好方法。我会这样做：

为了计算路径长度 (155.53)，我使用了 JS 和方法 getTotalLength。我将路径计算为半径为 33 个单位的圆弧，从 3*Math.PI/4 开始并在 Math.PI/4 结束。

动画发生在鼠标悬停。

svg{border:1px solid;width:90vh}

#thePath{
  stroke-dasharray : 155.53px;
  stroke-dashoffset : 155.53px;
  transition: stroke-dashoffset .5s;
}

svg:hover #thePath{
  stroke-dashoffset : 0px;
}

<svg viewBox ="0 0 71 70" id="svg">
<defs>
  <linearGradient id="lg">
   <stop offset="0%" stop-color="#3f88c5"></stop>
   <stop offset="100%" stop-color="#00c8a8"></stop>
  </linearGradient>
 </defs>
  
  <path id="thePath" d="M12.165476220843935,58.33452377915607A33,33,0 1 1 58.834523779156065,58.334523779156065" fill="none" stroke="url(#lg)" stroke-width="4" />
</svg>

这是我使用 JS 计算所有这些的代码：

let R = 33;// the radius of the arc for the path
// the starting point of the path
let x = 35.5 + R * Math.cos(3 * Math.PI / 4);
let y = 35 + R * Math.sin(3 * Math.PI / 4);
// the end point of the path
let _x = 35.5 + R * Math.sin(Math.PI / 4);
let _y = 35 + R * Math.sin(Math.PI / 4);
// the value of the d attribute of the path
let d = `M${x},${y}A${R},${R},0 1 1 ${_x},${_y}`;
thePath.setAttributeNS(null, "d", d);

let pathLength = thePath.getTotalLength();

thePath.setAttribute(
  "style",
  `stroke-dasharray : ${pathLength}px; stroke-dashoffset : ${pathLength}px;`
);

svg{border:1px solid;width:90vh;}

#thePath{ 
  transition: stroke-dashoffset .5s;
}

svg:hover #thePath{
  stroke-dashoffset : 0px!important;
}

<svg viewBox ="0 0 71 70" id="svg">
<defs>
  <linearGradient id="lg">
   <stop offset="0%" stop-color="#3f88c5"></stop>
   <stop offset="100%" stop-color="#00c8a8"></stop>
  </linearGradient>
 </defs>
  
  <path id="thePath" fill="none" stroke="url(#lg)" stroke-width="4" />
</svg>

Answer 2

按照正常方法，您没有要设置动画的笔画。所以你可以做的是将动画描边线变成一个蒙版。然后将该面具应用于更复杂的形状。

#progress circle {
  animation: do-progress 4s infinite;
}

@keyframes do-progress {
    0% { stroke-dashoffset: 0px; }
   50% { stroke-dashoffset: -146px; }
  100% { stroke-dashoffset: 0px; }
}

<svg width="71" height="70" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="progress" maskUnits="userSpaceOnUse">
            <rect x="-1" y="-1" width="100%" height="100%" fill="#fff"/>
            <circle r="30.5" cx="34.5" cy="34.5" fill="none" stroke="#000" stroke-width="10" stroke-dasharray="146 192" transform="rotate(-227, 34.5, 34.5)"/>
        </mask>
    </defs>
    <g class="graph-arc" transform="translate(1,1)" mask="url(#progress)">
        <path stroke="#3f88c5" fill="#3f88c5" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(225, 34.5, 34.5)"/>
        <path stroke="#3f88c5" fill="#3f88c5" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(238.5, 34.5, 34.5)"/>
        <path stroke="#3A8DC3" fill="#3A8DC3" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(252, 34.5, 34.5)"/>
        <path stroke="#3593BF" fill="#3593BF" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55 0.95 z" transform="rotate(265.5, 34.5, 34.5)"/>
        <path stroke="#3398BE" fill="#3398BE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(279, 34.5, 34.5)"/>
        <path stroke="#3398BE" fill="#3398BE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(292.5, 34.5, 34.5)"/>
        <path stroke="#359DBB" fill="#359DBB" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(306, 34.5, 34.5)"/>
        <path stroke="#36A3B9" fill="#36A3B9" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(319.5, 34.5, 34.5)"/>
        <path stroke="#36A3B9" fill="#36A3B9" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(333, 34.5, 34.5)"/>
        <path stroke="#38A8B6" fill="#38A8B6" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(346.5, 34.5, 34.5)"/>
        <path stroke="#39ADB4" fill="#39ADB4" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(360, 34.5, 34.5)"/>
        <path stroke="#39ADB4" fill="#39ADB4" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(373.5, 34.5, 34.5)"/>
        <path stroke="#3BB3B2" fill="#3BB3B2" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(387, 34.5, 34.5)"/>
        <path stroke="#3DB8AE" fill="#3DB8AE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(400.5, 34.5, 34.5)"/>
        <path stroke="#3DB8AE" fill="#3DB8AE" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(414, 34.5, 34.5)"/>
        <path stroke="#3EBDAD" fill="#3EBDAD" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(427.5, 34.5, 34.5)"/>
        <path stroke="#40C3AA" fill="#40C3AA" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(441, 34.5, 34.5)"/>
        <path stroke="#40C3AA" fill="#40C3AA" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(454.5, 34.5, 34.5)"/>
        <path stroke="#00c8a8" fill="#00c8a8" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(468, 34.5, 34.5)"/>
        <path stroke="#00c8a8" fill="#00c8a8" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 42.55, 0.95 z" transform="rotate(481.5, 34.5, 34.5)"/>
        <path stroke="#e5e5e5" fill="#e5e5e5" d="M 34.5,34.5 L34.5,0 A34.5,34.5 0 0,1 34.5, 0 z" transform="rotate(495, 34.5, 34.5)"/>
    </g>
    <circle r="25.875" cx="35.5" cy="35.5" fill="#fff"/>
</svg>

如何在 pie/donut 图表中按 SMIL/CSS 顺序设置多个 SVG 路径的动画

How to animate multiple SVG paths in a pie/donut chart in sequence with SMIL/CSS

javascript

css

animation

svg

smil