带有彩色片段和时钟动画的SVG甜甜圈

Question

我是 SVG 新手，正在尝试熟悉它。我想创建一个 SVG 甜甜圈，其中包含多个片段，每个片段具有不同的颜色。重要的是，这些片段应该是交互式的（这意味着如果我将鼠标悬停在它们上方，它们应该改变颜色或弹出）。整个甜甜圈应带有时钟动画。

我用一个简单的圆圈尝试了这一点，并相应地设置了

stroke-dasharray

和

stroke-dashoffset

。甜甜圈显示正常，但当我使用 CSS 应用时钟动画时，它会将所有片段的颜色覆盖为最后一个片段的颜色。但后来我在想，如果我希望每个片段都是交互式的，我可能必须为每个片段创建一个

circle

svg 元素，或者创建 svg

arc

s 并以这种方式构建我的甜甜圈。

如果有任何建议我应该走哪条路，我将不胜感激。到目前为止，这是我的代码：

HTML：

 <svg id = "circleMenuViewBox" width = "100%" height = "100%" viewBox="-10 -10 100 100">
    <defs>
      <circle id ="circlemenu" cx="10" cy="10" r="5" stroke-width="3" fill="none" stroke-dasharray="31.4"/>
      </defs>
      <use href="#circlemenu" stroke="#689689" stroke-dashoffset="0"/>
      <use href="#circlemenu" stroke="#83E8BA" stroke-dashoffset="7.85"/>
      <use href="#circlemenu" stroke="#B2E6D4" stroke-dashoffset="15.7"/>
      <use href="#circlemenu" stroke="#504136" stroke-dashoffset="23.55"/>
    </svg>

CSS：

#circlemenu { 
 fill: none;
 stroke-dasharray: 31.4;
 stroke-dashoffset: 31.4;
 animation: clock-animation 0.2s linear;
 animation-fill-mode: forwards;
}
@keyframes clock-animation {
  0% {
    stroke-dashoffset: 31.4;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

Answer 1

您的动画导致最后一个圆圈覆盖所有其他片段。

您可以创建一个

<use>

来逐步显示圆环图，而不是对所有

<mask>

实例引用的圆定义进行动画处理。

#circleMask { 
 fill: none;
 stroke-dasharray: 31.4;
 stroke-dashoffset: 31.4;
 animation: clock-animation 0.8s linear;
 animation-fill-mode: forwards;
}
@keyframes clock-animation {
  0% {
    stroke-dashoffset: 31.4;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<svg id="circleMenuViewBox" width="100%" height="100%" viewBox="-10 -10 100 100">
  <defs>
    <circle id="circlemenu" cx="10" cy="10" r="5" stroke-width="3" fill="none" stroke-dasharray="31.4" />
    <mask id="mask" maskUnits="userSpaceOnUse">
        <use id="circleMask" class="segment" href="#circlemenu" stroke="#fff" />
    </mask>
  </defs>
  <g mask="url(#mask)">
  <use class="segment" href="#circlemenu" stroke="#689689" stroke-dashoffset="0" />
  <use class="segment" href="#circlemenu" stroke="#83E8BA" stroke-dashoffset="7.85" />
  <use class="segment" href="#circlemenu" stroke="#B2E6D4" stroke-dashoffset="15.7" />
  <use class="segment" href="#circlemenu" stroke="#504136" stroke-dashoffset="23.55" />
    </g>
</svg>