问题标签 [stroke-dasharray]

我正在为这个 svg 笔画设置动画，以更改 dasharray 偏移量。边框的两端可以动画，而不是左端是静态的，只有另一端移动和环绕？

我被迫在这里纠正更多的东西，让我知道是否清楚，或者我是否需要以更好的方式解释我需要什么。谢谢。

我正在使用这个关于内联 SVG 的视频教程作为参考。我正在尝试复制使 SVG 线看起来从中点向外绘制的效果。视频方法和我的方法之间的唯一区别是，在视频中，SVG 线具有预定义的长度，而我的方法是可变长度。

该方法背后的想法非常简单。您制作一条任意大小的 SVG 线，然后将其 stroke-dasharray 属性设置为 '0, length/2' 并将其 stroke-dashoffset 属性设置为 '-length/2'，这样就根本不会绘制该线首先，它的“起点”设置在它的中间点。然后，当相关输入字段被聚焦时，将 dasharray 属性更改为“length, 0”，将 dashoffset 属性更改为 0。这使得破折号等于线的长度。这应该使线看起来从中间点拉入，如果你从一开始就知道线的长度，确实会发生这种情况。但是，当我尝试使用没有预定长度的行来实现这种方法时，情况并非如此。我的线似乎是从线的最开头而不是从中间点开始画的。我很困惑为什么会这样。我正在使用 JavaScript 来计算行的长度。下面是我的代码片段。

我尝试使用不同的百分比，并且只使用值“20”作为我的半长，因为我的视口长度为“40”，但这些都不起作用。有谁知道这里可能是什么问题？

我在页面上有两个圆形 svg，它应该根据传入的数据动态更改它的 stroke-dasharray。但是，传递给 dash-array 的第一个值会影响后续的值。

例如，如果我分别将 2 传递给第一个和 4 到第二个 stroke-dasharray，我希望它们在页面上具有不同的笔划，但是根据传递的第一个值，它们保持相同的笔划。

这是代码笔示例

我想知道您是否可以像在 QGIS 中那样在小节中使用简单的标记来表示 Leaflet 中的折线。因此，我想要一个六边形作为破折号，而不是简单的破折号。我有一条代表石墙的折线，并想在我的传单地图中对其进行符号化，如以下屏幕截图（来自 QGIS）所示。我能做到吗：来自 QGIS 的示例

我有以下要制作动画的 SVG 文本。动画没有问题，但是 dash-array 的长度从 Chrome 到 Safari 不同（尚未在其他地方测试）。

请注意，stroke-dasharray 在 Chrome 上工作在 87，在 Safari 上工作在 837。为什么不一样？

我正在尝试使用 stroke-dasharray 和 stroke-dashoffset 画一条线，效果很好。

还需要一个圆圈沿着路径移动。

我在offset-path. 圆圈没有连接到线上。

有什么问题？

Codepen—— https: //codepen.io/felixaj/pen/mdWWJao

我可以在虚线样式中添加文本和特殊符号吗？喜欢这张照片

我知道 dashArray

我正在关注这个codepen来创建一个对话框动画。但是当我设置更大的对话框宽度和高度时，动画似乎不像参考那样流畅。似乎问题出在 svgstroke-dashoffset值上，但我不确定我需要设置哪些值。这是我复制的代码笔。

我想绘制一个带有顶部和底部边框的矩形（作为数据库流程图的一部分）。因此，我像这样在 rect 上使用 stroke-dasharray：

如果您仔细观察渲染矩形的左上角，您应该会看到一个凹口（由洋红色圆圈突出显示）。该像素未在矩形的其他角上呈现（由绿色垂直线突出显示）：

我预计

• 没有缺口
• 顶线与底线的长度相同
• 顶线和底线在渲染图像中的相同 x 位置开始

这意味着，我希望图像看起来像这样（没有洋红色圆圈和绿线）

如何修复我的 SVG 看起来像这样？这可以用strokeon完成rect吗？为什么首先添加缺口/像素？

编辑：我在 Google Chrome 版本 95.0.4638.69 和 Firefox 94.0 的 Linux 上遇到了这个问题，但这似乎是一个错误（见评论）。

circle我正在尝试使用in 中的元素创建饼图svg。我可以将值填充为 60%、30% 和 10%，但所有圆圈都从同一位置开始。

我怎样才能让下一个圆圈从上一个结束的地方开始？

我在 CSS 中提到的也stroke-width不起作用。