问题标签 [stroke-dasharray]

首先让我说我的最终目标类似于下图。它在每个环中有 36 个圆圈，它们之间的间距使得每个点都位于其内部圆圈中两个点之间的中间

我发现我可以使用stroke-dasharray非常小的长度（.001在我的情况下）并stroke-linecap="round"制作边框圆点。我现在设置它的方式每个都比上circle一个大 5 并且为. 这是我的 jsFiddle。目前我最内圈只有21个点，我最外圈有29个点radiuspercentagestroke-dasharray

如何在每个圆圈中获得相同数量的点？是否有数学方法可以做到这一点或我不知道的属性？可以做些什么来均匀地使用整个圆周来均匀地隔开圆圈（而不是在我认为的 x 轴的右侧有一些）？

在我看来，我必须简单地猜测并检查这些值才能以我想要的方式得到它，但我很想被证明是错误的。stroke-dasharray Mozilla 和 W3C上的文档不是很有用

我有一系列带有边界的圆圈，这些圆圈由较小的圆圈组成，我称之为“点”。然后，我通过使用 CSS3 旋转圆圈来为圆圈设置动画transform，每个圆圈都比上一个圆圈多 5 或 15 度（交替），中间圆圈根本不旋转。这种度数的交替是由于其中一半的原始偏移量5deg

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

这是每个圈子的设置方式。每个点之间的间距是通过使用公式确定的spacing = (radius × 2) × 3.14159265 ÷ numberOfCircles。这.001是为了让 Chrome 看到这些点

这是演示 jsFiddle

谁能帮我修复这个 SVG 渲染偏移错误？

编辑

vals 和 squeamish ossifrage 都为这个问题提供了非常有效的替代解决方案。但是，如果可能的话，我仍然希望实际解决偏移/渲染问题

我正在使用 D3js，并且绘制了一个像这样工作的图表（编辑：使用 JSON 数据的新小提琴）

我实际上正在为我的数据使用外部 JSON 文件。

我的问题是，当我在另一个具有不同分辨率的系统中打开文件时，我正在绘制的线向后工作。我认为问题是由于不同的分辨率或可能是因为其他原因。有人可以帮我解决这个问题。

提前致谢...

我正在寻找动画 SVG 的单个破折号的旋转stroke-dasharray，有没有人知道如何，因为它是可能的？

我意识到我可以使用 CSS' 旋转 SVG 元素的整个对象transform:rotate()，但是有什么方法可以旋转单个破折号吗？我也意识到我可以使用单个元素重新创建它并旋转它们，但这不是我想要做的，因为性能和简洁的原因

如果你想要一个演示，这里有一个演示。我希望方块在它们的位置保持直立，而不是在它们沿圆形路径旋转时旋转。我正在寻找重新创建这个 gif

PS我知道圆圈不是完全对齐的，我之前问过这个

我想要实现的是从其父级的一个边缘绘制一条虚线到另一个边缘。与此类似的东西：

问题是，上述内容似乎只在设计时起作用。

问题 #2 是即使我成功绘制了类似的东西，它也会被抗锯齿破坏。我知道 SL 没有 SnapsToDevicePixels 选项，但 UseLayoutRounding 和PixelSnapper都无法阻止我的 1px 虚线在某些情况下分布在 2 条像素线上。

我想为自定义徽标制作动画，例如典型的进度圈（例如百分比）。因此，我创建了一个带有笔划的圆圈，并为 svg 徽标设置了一个剪辑路径。

我快完成了，但我需要将笔画动画的起点从左侧（参见代码）更改为顶部 - 或箭头旁边。这样进度就从箭头之一开始。stroke-dasharray 和 stroke-dashoffset 的不同值将不起作用。

这是我当前的代码：http: //jsfiddle.net/w5huatyf/

谢谢你的帮助！

我通过以下方式预测国家边界：

一些边界svg线无缘无故地连接到其他边界：

放大时：

注意：海岸线和封闭的多边形都不会被弄乱。npm topojson我通过& natural earth shapefiles生成了这些数据。在黄色印度（巴基斯坦、尼泊尔、柬埔寨边界）周围似乎也缺少二分之一的国际边界。

什么是窃听？我该如何解决？

Demo , #Mesh , 可能与：D3js SVG open lines display a fill artifact, 如何修复它？& “中风破折号数组：x，y；” 搞乱svg路径？（铬）。

打印线与stroke-dasharrayPDF 创建不同的行为，请在此处查看图像。

图片 A，我直接从浏览器 (Chrome) 截取的屏幕截图。图片 B是同一页的打印 PDF。

请注意图片 B 中的差异，破折号之间有一条细线，这发生在 Chrome 或 PhantomJS（可能与 WebKit 相关？）中，而不会发生在 Firefox 中。

我试图做的是将这种图表导出为 PDF，但如您所见，strokoe-dasharray打印不正确。

上面这张图片是我从这个MDN页面上拍的，有什么办法可以解决这个问题吗？

出于某种原因，我下面代码中的 svg 动画无法正确完成。我正在制作动画，stroke-dashoffset但是当动画完成时，外圈仍然缺少一块。尽管我将stroke-dashoffset返回值设置为零，但它似乎仍在完成动画设置。

>

我在 Safari 中遇到了一个奇怪的 SVG 渲染问题。我有一个像圆形加载器一样带有笔画动画的圆圈，但是由于某种原因，一旦我添加了stroke-dashoffset或stroke-dasharray，渲染就关闭了。

gif供参考：

_{（来源：askenielsen.dk）}

一旦应用了其中一种样式，渲染似乎会变得更加锯齿状。

它看起来并不多，但不止一个圆圈，它变得非常明显：

_{（来源：askenielsen.dk）}

在视网膜显示器上的 Safari 或在 IE、Firefox、Chrome 等中看起来不错。

在这两种浏览器中，圆圈的缩放或笔划宽度都不会改变问题。

SVG

CSS

你可以在这里测试它。

有任何想法吗？