Question

我有以下SVG形状：

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="200" height="200" viewBox="0 0 231.764 251.764" enable-background="new 0 0 231.764 251.764"
     xml:space="preserve">
  <circle id="line" stroke-width="10" stroke-linecap="square" stroke="#000" r="50" cy="55" cx="55" fill="none"></circle>
</svg>

我试图让虚线笔划变圆，但正如你在JSFiddle中注意到的那样，笔划只是在某个点上跳跃。为什么会这样？什么使这不起作用？

我计算了圆的直径并使其从总长度旋转到0，它应该正常工作。

Answer 1

这是因为您的周长应该是笔划虚线阵列长度总和的整数倍。将笔划数组更改为10,21.42;而你将被设定。 10 + 21.42加起来31.42，乘以10 - 是你的圆周。

（但是使用变换旋转会不会更容易？）

Answer 2

尝试将 stroke-dasharray：更改为10,24.85;

＆＃13;

#line{
  stroke-dasharray: 10, 24.85;
  stroke-dashoffset: 314;
  -webkit-animation: dash 14s linear infinite;
}
body{
  background: #fff;
}

@keyframes dash{
  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="200" height="200" viewBox="0 0 231.764 251.764" enable-background="new 0 0 231.764 251.764"
	 xml:space="preserve">
  <circle id="line" stroke-width="10" stroke-linecap="square" stroke="#000" r="50" cy="55" cx="55" fill="none"></circle>
</svg>

＆＃13;

在SVG形状上设置笔划动画不起作用

2 个答案: