Css SVG数组偏移量不一致

我有一系列的圆，它们的边界由更小的圆组成，我称之为“点”。然后，我通过CSS3的

变换

旋转圆来设置圆的动画，每个圆比上一次开始时的中间圆完全不旋转多5度或15度（交替）。这种度数交替是由于其中一半的

5deg

动画本身效果很好，但圆中每个点之间的偏移并不一致。当动画完成时，一些点会向后跳，这一点变得很明显。如果它们都偏离了一个一致的量，那么在我的计算中这将是一个错误，但是同一个圆圈周围的点跳跃了不同的量，这意味着它们从一开始就抵消了不同的量。Vals在其答案末尾的示例中也显示了这种偏移量的不一致性

下面是每个圆的设置方式。通过使用公式

间距=（半径×2）×3.14159265÷圈数

确定每个点之间的间距。

.001

允许铬元素看到圆点

<circle cx="30" cy="30" r="radius" stroke-dasharray="0.001, spacing" stroke="color"/>

有人能帮我修复这个SVG渲染偏移错误吗

编辑

---

VAL和squeamish ossifrage都为这个问题提供了非常有效的替代解决方案。但是，如果有可能的话，我仍在寻找解决偏移/渲染问题的方法。我认为您的设置中有两个小错误

第一个是点的间距是笔划划线数组的两个参数之和。因为第一个参数总是0.001，所以第二个参数应该是公式减去0.001的结果

第二个是在圆周围放置36个点。点与点之间的角度为10度。所以，你的动画应该是10度，20度，30度，而不是15度，30度，45度。。。这会在每个循环结束时产生5度的跳跃

我想我或多或少都在工作

最初的轮换也有问题；我希望现在这是你想要的

而且，由于svg的小尺寸，出现了某种取舍；将其设置为600平方米效果更好

我还添加了一条10度的线，以检查点的正确对齐

CSS

而且还优化了一些样式

嗯，在花了很多时间处理这个问题之后，我几乎可以肯定在某种舍入/精度方面存在某种缺陷

为了避免这个问题，我完全改变了想法。目标是让圆在结束动画之前形成完整的圆，以便动画的开始和结束始终同步

因为这会生成一个巨大的关键帧样式，我想重用它；为了实现这一点，我以嵌套的方式将圆分组；并将动画应用于每个组：

HTML

和（抱歉，仅限webkit）

这是我试图调查的错误。我已经改变了系统，而不是动画，我有两套圆圈，一个是彩色的，另一个是黑色的，并旋转了10度。彩色圆圈不应该显示；偏移量是对误差的度量。（可能需要滚动才能看到圆圈

---

我认为这里的问题在于虚线绘制算法使用了直线长度的快速近似值，而不是沿每条线段实际积分路径长度，这可能会非常缓慢

如果将点绘制为单个圆而不是使用虚线，则此问题将消失。以下PHP脚本将为您完成计算：

<svg viewBox="0 0 60 60">
<g transform="translate(30,30)">
<?php
define("PI",3.141592654);
for ($i=0; $i<10; $i++) {
  $r = 10 + 2 * $i;
  $hue = 120 - 12 * $i;
  echo "<g id=\"ring_$i\">\n";
  for ($th=0; $th<360; $th+=10) {
    $theta = ($th + 5 * $i) * PI / 180;
    $x = $r * sin($theta);
    $y = $r * cos($theta);
    printf("  <circle cx=\"%.5f\" cy=\"%.5f\" r=\"0.45\" fill=\"hsl(%d,100%%,50%%)\"/>\n",$x,$y,$hue);
  }
  echo "</g>\n";
}
?></g>
</svg>

---

你可以在这里看到它的作用：

我对这个问题的答案很感兴趣。我尝试了

用不同的值绘制dashoffset

；没有骰子。+1因为我被催眠了（在Chrome上）@AndreaLigios你可能会喜欢的（：在我的答案末尾添加了我上次调查偏移量的尝试；可能是可以帮助某人使用您的编辑找到解释。问题仍然存在。我用正确的旋转度更新了我的JSFIDLE，显示了我想要的效果（在5度和15度旋转之间交替-总共10度平均变化）.正如Tyler所展示的，我不认为跳跃是由于

0.001

参数+1造成的，诚然这更接近，但它仍然有很少的跳跃（大概）因为偏移量。你也注意到了，这不仅仅是我这边的问题，对吗？我没有注意到跳跃，因为我正在缩小尺寸进行测试，但是的，它们确实存在。添加了新的解决方案，完全绕过了问题。你的编辑占据了蛋糕。浏览器SVG渲染引擎的出色解决方案！我改进了你的CSS，删除了webkit de悬垂：这是一个很大的圆圈，哈哈。固体替代品以及！

<svg viewBox="0 0 60 60">
    <g class="g">
    <circle cx="30" cy="30" r="10" stroke-dasharray="0.001, 1.745" stroke="hsl(120, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="12" stroke-dasharray="0.001, 2.094" stroke="hsl(108, 100%, 50%)" class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="14" stroke-dasharray="0.001, 2.443" stroke="hsl(96, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="16" stroke-dasharray="0.001, 2.793" stroke="hsl(84, 100%, 50%)"  class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="18" stroke-dasharray="0.001, 3.142" stroke="hsl(72, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="20" stroke-dasharray="0.001, 3.491" stroke="hsl(60, 100%, 50%)" class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="22" stroke-dasharray="0.001, 3.840" stroke="hsl(48, 100%, 50%)"/>
    <g class="g">
     <circle cx="30" cy="30" r="24" stroke-dasharray="0.001, 4.189" stroke="hsl(36, 100%, 50%)"  class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="26" stroke-dasharray="0.001, 4.538" stroke="hsl(24, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="28" stroke-dasharray="0.001, 4.887" stroke="hsl(12, 100%, 50%)"  class="c2"/>
    </g></g></g></g></g></g></g></g></g></g>
</svg>

body {
    background: black;
    padding: 0;
    margin: 0;
}

circle {
    fill: none;             
    stroke-width: 1;
    stroke-linecap: round;
}

.g { 
    -webkit-transform-origin: center center; -moz-transform-origin: center center;                                         transform-origin: center center;
    -webkit-animation-duration: 108s; 
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: anim; 
    -moz-animation:second  3s ease-in-out infinite; 
     animation:second  3s ease-in-out infinite;}

.c2 {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(5deg); 
} 

@-webkit-keyframes anim {   0% { -webkit-transform:rotate(0deg)}
                        2.778% { -webkit-transform:rotate(10deg)}
                        5.56% { -webkit-transform:rotate(20deg)}
                        8.33% { -webkit-transform:rotate(30deg)}
                       11.11% { -webkit-transform:rotate(40deg)}
                       13.89% { -webkit-transform:rotate(50deg)}
                       16.67% { -webkit-transform:rotate(60deg)}
                       19.44% { -webkit-transform:rotate(70deg)}
                       22.22% { -webkit-transform:rotate(80deg)}
                       25% { -webkit-transform:rotate(90deg)}
                       27.78% { -webkit-transform:rotate(100deg)}
                       30.56% { -webkit-transform:rotate(110deg)}
                       33.33% { -webkit-transform:rotate(120deg)}
                       36.11% { -webkit-transform:rotate(130deg)}
                       38.89% { -webkit-transform:rotate(140deg)}
                       41.67% { -webkit-transform:rotate(150deg)}
                       44.44% { -webkit-transform:rotate(160deg)}
                       47.22% { -webkit-transform:rotate(170deg)}
                       50%    { -webkit-transform:rotate(180deg)}
                       52.78% { -webkit-transform:rotate(190deg)}
                       55.56% { -webkit-transform:rotate(200deg)}
                       58.33% { -webkit-transform:rotate(210deg)}
                       61.11% { -webkit-transform:rotate(220deg)}
                       63.89% { -webkit-transform:rotate(230deg)}
                       66.67% { -webkit-transform:rotate(240deg)}
                       69.44% { -webkit-transform:rotate(250deg)}
                       72.22% { -webkit-transform:rotate(260deg)}
                       75%    { -webkit-transform:rotate(270deg)}
                       77.78% { -webkit-transform:rotate(280deg)}
                       80.56% { -webkit-transform:rotate(290deg)}
                       83.33% { -webkit-transform:rotate(300deg)}
                       86.11% { -webkit-transform:rotate(310deg)}
                       88.89% { -webkit-transform:rotate(320deg)}
                       91.67% { -webkit-transform:rotate(330deg)}
                       94.44% { -webkit-transform:rotate(340deg)}
                       97.22% { -webkit-transform:rotate(350deg)}
                     100%     { -webkit-transform:rotate(360deg)}
}

<svg viewBox="0 0 60 60">
<g transform="translate(30,30)">
<?php
define("PI",3.141592654);
for ($i=0; $i<10; $i++) {
  $r = 10 + 2 * $i;
  $hue = 120 - 12 * $i;
  echo "<g id=\"ring_$i\">\n";
  for ($th=0; $th<360; $th+=10) {
    $theta = ($th + 5 * $i) * PI / 180;
    $x = $r * sin($theta);
    $y = $r * cos($theta);
    printf("  <circle cx=\"%.5f\" cy=\"%.5f\" r=\"0.45\" fill=\"hsl(%d,100%%,50%%)\"/>\n",$x,$y,$hue);
  }
  echo "</g>\n";
}
?></g>
</svg>

body { background: black; padding: 0; margin: 0; }
g#ring_0 { transform:rotate(5deg); }
g#ring_1 { animation:second 3s ease-in-out infinite; }
g#ring_2 { animation:third 3s ease-in-out infinite; }
g#ring_3 { animation:fourth 3s ease-in-out infinite; }
g#ring_4 { animation:fifth 3s ease-in-out infinite; }
g#ring_5 { animation:sixth 3s ease-in-out infinite; }
g#ring_6 { animation:seventh 3s ease-in-out infinite; }
g#ring_7 { animation:eighth 3s ease-in-out infinite; }
g#ring_8 { animation:ninth 3s ease-in-out infinite; }
g#ring_9 { animation:tenth 3s ease-in-out infinite; }
keyframes second { 100% { transform:rotate(10deg) } }
keyframes third { 100% { transform:rotate(20deg) } }
keyframes fourth { 100% { transform:rotate(30deg) } }
keyframes fifth { 100% { transform:rotate(40deg) } }
keyframes sixth { 100% { transform:rotate(50deg) } }
keyframes seventh { 100% { transform:rotate(60deg) } }
keyframes eighth { 100% { transform:rotate(70deg) } }
keyframes ninth { 100% { transform:rotate(80deg) } }
keyframes tenth { 100% { transform:rotate(90deg) } }