Question

我正在使用这个很棒的tutorial来创建圆形进度条。

但我的问题是我想改变CSS中的stroke-dasharray：

fill: none;
stroke: #FF2A2A;
stroke-width: 9.9213;
stroke-miterlimit: 10;
stroke-dasharray: 1.4308, 1.4308;

我想让它像教程一样动画，但看起来像这个图像： Dashed border circle

Answer 1

对您提到的教程进行以下更改：

       <Router>
  <div>
    <Route exact path="/" component={Splash} />
    <Route path="/signin" component={SignInView} />
    <Route path="/signup" component={SignUpView} />
    <Route path="/dashboard" render={() => (<TabbedView tabIndex={0} {...this.props} />)} />
    <Route path="/activities-dashboard" render={() => (<TabbedView tabIndex={1} {...this.props} />)} />
    <Route path="/new-activity" render={() => (<TabbedView tabIndex={2} {...this.props} />)} />
    <Route path="/profile" render={() => (<TabbedView tabIndex={3} {...this.props} />)} />
    <Route path="/activities/:value" component={CircularList} />
  </div>
</Router>

如何创建带有虚线边框的圆圈svg进度条

1 个答案: