问题标签 [stroke-dasharray]

好的，所以我在我的 WordPress 帖子中编写了这段代码，但什么也没显示。但是当我以简单的 HTML 文件格式运行它时没有问题。谁能说出为什么这个东西在 WordPress 中不起作用...

如果我在一个圆圈上使用一个非常小的 stroke-dasharray，它会在圆圈的中间产生奇怪的“类似矩形”的形状。是什么导致了这种行为，有没有办法解决它？

Chrome stroke-dasharray:0.6 及更低版本失败 Firefox stroke-dasharray:2 及更低版本失败

我创建了一个 SVG 动画，我允许 stroke-dasharray 移动。是否有可能我可以在 stroke-dasharray 的尾部添加一个渐变并保持一侧透明，如您在示例中看到的那样？

我的问题解释得很简单。我已经得到了情况的截图并截取了一个 jsFiddle 代码。

我遇到的问题在屏幕截图上清晰可见，圆形部分在 Chrome 浏览器中看起来很完美，但在 FireFox 和 Edge 等中，这些部分略有偏移。

在当前状态之前，我已将 r / cx / cy 属性设置为 css，但这也不兼容。我发现您必须将它们直接写入圆形标签。

有没有人遇到过这个问题，我的意思是，但谁能解释为什么它不能按预期工作？

[编辑]感谢@Sphinxxx 回答 y 的基本问题不起作用。

是否有解决问题的技巧/解决方法？

截屏：

此屏幕上的浏览器： 1. Chrome 2. FireFox 3. Edge

[更新]（在当前版本的 FireFox 中，该问题已修复）

• 现在我们只在 Edge 浏览器中遇到这个问题

这里的代码示例：

我有一个带有虚线边框的圆圈。但是，边框应该更像垂直破折号，而不是点。

有没有办法使边框与css的设计完全相同（垂直虚线不是粗实线）？

我想改变这个类：“OtherCaptionBorder”

我的CSS：

这是我的 HTML：

这是我希望我的圈子看起来的样子：

在下一个示例中，我将绘制一个没有填充的椭圆和一个描边-dasharray。pointer-events设置为visibleStroke或。stroke当我将鼠标悬停在笔划上时，里面的圆圈应该改变它fill并且stroke：

来自MDN的定义：

visibleStroke：
仅限 SVG。只有当可见性属性设置为可见并且鼠标光标位于元素的周边（即笔划）上时，该元素才能成为鼠标事件的目标。stroke 属性的值不影响事件处理。

在下一个示例中，当我将鼠标悬停在破折号上时，一切都按预期进行。但是，当我将鼠标悬停在间隙上时，什么也没有发生。更重要的是：在 Chrome 中，不敏感的间隙接缝被抵消。这是错误还是功能？

我将此图表与角度 6 一起使用，我在此图表上遇到了一些冲突，我尝试绑定数据，但我不能这样做，它无法正常工作，

这个stroke-dasharray="5, 100"给我换了这个 stroke-dasharray="{{this.master.locationVsStatusMap.size}}, 100"

堆栈闪电战

任何人都知道如何正确地做到这一点？

提前致谢！

我正在使用一个<circle>带有stroke-dasharrayandstroke-dashoffset的元素来为圆环图的焦点元素绘制一个指示器，而在 Safari 中它并没有正确显示。

外部饼图是<path>在所有浏览器中都可以正常工作的 s，但是因为我需要指示器在扇区之间转换，所以它们需要是<circle>s。

我认为这是因为 Safari 正在根据 svg 视图框或类似的东西计算圆的周长，但没有骰子。任何帮助，将不胜感激。

https://codepen.io/pouretrebelle/pen/d56df310e385a0c2fdedb5bbddc2308d

在 Chrome 中渲染：

在 Safari 中渲染：

在铬中，我可以使用 stroke-dasharray 后跟 2 个带有单位像素的数字，这在 Firefox 中不起作用 - 它只接受无单位值。问题是我无法从变量中剥离单位。您对如何在 Firefox 中获得与在 Chromium 中相同的效果有任何想法吗？

先感谢您

编辑：

我有一个包含两个多边形的 SVG。我想从头到尾为第一个多边形设置动画，然后为第二个多边形设置动画。动画将像填充一样工作。

我只想使用 stroke-dasharray 和 css 关键帧。

如果您想使用它，我会提供一支笔。 https://codepen.io/anon/pen/byVpjM

所以我正在寻找的输出是，动画从 M 的左下角开始，在右下角结束。任何帮助都感激不尽。