SVG圆中dasharray属性的奇怪行为 [英] Strange behaviour of dasharray property in a SVG circle

问题描述

我正在尝试创建一个SVG圆的无限动画循环.

I'm trying to create an infinite animation loop of an SVG circle.

我想创建12个相等的块并将它们分开一些间隙.

I want to create 12 equal pieces and separate it by some gap.

要计算圆形件的值，我使用了下表中的 k 系数 所以我做了0,25782 * 160(我的圆的直径)，我得到了:41.2512(它应该是我的碎片的值).

To calculate value of circle pieces I used k coefficient from an table below So I did 0,25782 * 160 (diameter of my circle) and I got: 41.2512 (it's should be a value of my pieces).

此后，我通过该值创建了 strokeDasharray 道具: 40 1.2512 .我认为它应该是正确的值.

After that I created strokeDasharray prop via that value: 40 1.2512 I thought that it should be correct value.

看起来像是，但是当我更改 strokedashOffset 道具时，我在右侧看到了一些伪像.我不知道为什么会发生，如何解决(以及我在哪里犯了错误)?

Looks like it is but when I changed the strokedashOffset prop I saw some artifact at the right side. I don't know why it's happened and how I can fix it (and where I did an mistake)?

感谢您的帮助.

在此处进行演示(只需将 strokedashOffset 更改为408值，您将看到该问题).

Demo here (just change the strokedashOffset to a 408 value and you will see that issue).

https://jsfiddle.net/q8enje9o/

这是我的纯svg代码

<svg version="1.1" id="svgout_dasharray" baseProfile="full" width="500" 

height="500" viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black">

<defs></defs>

<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" style="stroke-width: 30;stroke-dasharray: 40, 1.2512;stroke-dashoffset: 380;"></circle>
</svg>

k 系数表. n-圈数

这是您可以计算这些系数的公式.本身

Here is the formula how you can calculate those coef. by itself

n -件数

360-2 * PI(整个圆圈)

360 - 2*PI (a whole circle)

k -我们的骨灰级.我们想找到的

k - our coef. that we want to find

P.S.这是一个具有更新后问题的演示(Chrome最新版和Windows 10)

P.S. Here is a demo with the issue after update (Chrome latest & Windows 10)

推荐答案

您的问题有点令人困惑，因为您谈论了很多有关如何计算破折号数组的问题，但抱怨在更改破折号偏移量时看起来很有趣.

Your question is a little confusing because you talk a lot about how you are calculating the dash array, but complain about things looking funny when you change the dash offset.

圆的周长为2 * PI *半径.如果要在圆周上放置 n 个部分，则破折号数组中的破折号+间隙"必须加起来为:

The circumference of a circle is 2 * PI * radius. If you want a n sections in your circumference, then the "dash + gap" in your dash array needs to sum to:

(2 * PI * radius) / n

因此，对于12个扇区，半径为80，该值应为

so for 12 sectors, and a radius of 80, that value would be

(2 * PI * 80) / 12 = 41.8879

正如罗伯特所说，"stroke-dashoffset ="40 1.8879"应该有效.确实如此.

As Robert said, `stroke-dashoffset="40 1.8879" should work. And indeed it does.

<svg width="500" height="500" style="border: 1px solid black">
  <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
          style="stroke-width: 30;stroke-dasharray: 40 1.8879;"/>
</svg>

现在，您还讨论了破折号偏移.我不知道您为什么要更改破折号偏移量.我猜您正在尝试使短划线围绕某物的圆周旋转.是吗?

Now you also talk about dash offset. I don't know why you want to change the dash offset. I guess you are trying to make the dashes rotate around the circumference of something. Is that right?

如果是这样，那应该可行-只要您对破折号数组的值是准确的即可.见下文.

If so, then that should work - as long as you are accurate with your dash array values. See below.

<svg width="500" height="500" style="border: 1px solid black">
  <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
          style="stroke-width: 30;stroke-dasharray: 40 1.8879; stroke-dashoffset: 408;"/>
</svg>

这篇关于SVG圆中dasharray属性的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！