Question

我目前有一个带有三个圆形元素的SVG。

圆1：灰色边框（底部图层）
第2圈：红色虚线边框（中间层）
第3圈：蓝色边框（顶层）

我可以为Circle 3（蓝色）设置动画以显示40％。

不幸的是，第2圈（红色）围绕整个圆圈（100％）而不是80％。

所以我的问题是...

可以将“圈子2”的动画设置与“圈子3”相同，并且仅占80％吗？还是因为笔划破折号：0.2em（CSS中的第93行）而无法实现？
在css（第81行和第87行）中，我具有矢量效果：注释了非缩放笔画。我想取消对这两行的评论，但是很遗憾，进度条看起来不正确。有什么可能的方法可以使笔触在具有所需动画/外观时不响应？

感谢您的帮助！

这是Codepen：https://codepen.io/anon/pen/oaVrpE

P.S。我可以通过将“活动”类添加到圆形元素来制作动画。该类通过按钮添加。最后，“活动”类在CSS中调用关键帧名称。

HTML和CSS代码的片段，但请务必查看上面的代码笔。

HTML

<svg id="categoryIcon" data-name="category icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" width="100%" height="100%" class="catIcon userIcon">
    <circle class="filler-loader fill-line" cx="48" cy="48" r="47" />
    <circle class="filler-loader path path-dashed" cx="48" cy="48" r="47" />
    <circle class="filler-loader path path-progress" cx="48" cy="48" r="47" />
    <path d="M1536 1399q0 109-62.5 187t-150.5 78H469q-88 0-150.5-78T256 1399q0-85 8.5-160.5t31.5-152 58.5-131 94-89T583 832q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" transform="translate(26, 25), scale(0.025)"/>
</svg>

CSS

svg.catIcon {
  overflow: visible;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;

  .filler-loader {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

  .fill-line {
    fill: #fff;
    stroke: #e3e3e3;
    stroke-width: 8px;
    // vector-effect: non-scaling-stroke;
  }

  .path {
    fill: none;
    stroke-width: 8px;
    // vector-effect: non-scaling-stroke;
    stroke-dasharray: $dashOffset;
    stroke-dashoffset: $dashOffset;

    &-dashed {
      &.active {
        stroke-dasharray: 0.2em;
        stroke: red;
      }
    }

    &-progress {
      &.active {
        stroke: blue;
      }
    }

  }

  &.userIcon {
    .path-dashed {
      &.active {
        animation: circProgress80 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
        clip-path: url("#circleMask");
      }
    }

    .path-progress {
      &.active {
        animation: circProgress40 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
      }
    }
  }

}

使用圆形SVG，如何为虚线进度条设置动画以显示特定百分比？

0 个答案: