问题标签 [stroke-dasharray]

我想在 0,20,40,60,80,100 从行 x1="0" 到 x2="100" 显示 6 个刻度，但最后一行不显示，只显示前 5 个。我正在使用以下代码

有没有办法在不改变行长的情况下完成。当 dash-array 中有 0 时会发生什么？我不确定

我一直在制作一个动画，该动画显示了从头到尾绘制的单个 GPS 轨迹。

以下内容在 macOS chrome 和 safari 以及 android chrome 上正常工作。

在我的 iPad（safari、chrome、firefox）上尝试此操作时，我发现轨道的动画不正确，因为它从头到尾都不是很好，但在轨道的中途显示了多个开始。

关于如何应对这种行为的任何想法？

我正在尝试用 CSS 绘制一条有限的虚线，我的意思是虚线的数量将受到限制，例如，如果限制数量为 3，则该线将是： _____ _____ _____

目前，我正在使用百分比计算来获得相同的结果，但不确定它是否耐用。

当前的：

理想的：

我将使用 apath-dasharray和的组合进行无缝循环pathdashoffset

我的路径长度16.568147659301758由 safari 和 chrome 报告，但浏览器之间的动画循环不同。

即使pathLength="1"设置在<path> （现在由现代 safari 支持）上。我仍然感到不一致。

有什么方法可以抽象或绕过行为上的分歧？我敢肯定，许多图形库不得不以某种方式解决这个问题。

此处为pathLength="1"的 codepen

codepen 在此处使用定义的 16.568147659301758

我正在尝试仅使用 stroke-dasharray 和其他东西（如旋转和平移）绘制饼图，我不允许使用 stroke-dashoffset，因为 wkhtmltopdf 0.12.5 不支持它。我试图做一些类似于下面的代码

其中 31.4 是圆的周长，10.99 是周长的 35%。这是绘制一个代表饼图 35% 的切片。如何在不使用 stroke-dashoffset 的情况下绘制更多切片（例如，一个代表 40%，另一个代表 13%），我无法弄清楚这一点。非常感谢各位的帮助。

我正在玩我在 codepen 上找到的很酷的效果：codepe n.io/P3R0/pen/zxabvb

我想让这个 svg 动画上的破折号更短，并且相信我已经找到了执行此操作的 css 元素：

例如，当我将 70 减少到 30 时，破折号会变短，这很好。但是您会注意到它们不再顺畅地滑行 - 它们现在跳跃位置。

我一直在搜索并试图了解 stoke-dasharray 的工作原理，但无法解决。谁能向我解释这些数字是如何工作的，以及我如何制作更短的破折号，而这些破折号仍然可以顺利滑行。

谢谢你的帮助。

我使用 SVG 开发了下图。我使用 stroke-dasharray 将点添加到路径的末尾，但是添加了多个点。如何在紫色路径的末端添加一个点？是否可以使用 stroke-dasharray 来做到这一点？

https://i.stack.imgur.com/fXFrO.png

到目前为止，这是我的 HTML：

这是我的CSS：

我对此感到非常困难，所以我想看看这里是否有人能够帮助我思考这个问题。

我正在尝试将滚动侦听器附加到特定像素范围之间的 SVG 路径，因此当您上下滚动时它会来回绘制。

我一直在研究这几天，我发现了有关将笔画 dashoffset 进度转换为基于窗口顶部或文档高度的百分比作为单个数字的主题，但似乎无法包装我的关于如何将相同的逻辑应用于指定的像素范围。

我如何让 svg 路径的 stroke-dasharray 在像素范围的开始处处于其起始值 (3000)（比如从文档顶部开始的 2500px 到 3000px。），并且 stroke dasharray 的最终值是 6000 （它的最终值）在像素范围的末尾？我真的希望这不是一个我只是盯着太久的愚蠢简单的问题。这是我所拥有的：

对于我需要这样做的方程式的任何帮助将不胜感激。先感谢您。

我正在尝试在滚动上为 SVG 设置动画，我已经使用数学创建了我自己的 SVG 路径，它显示为我所需要的，但是当我尝试使用 CSS 对路径添加效果时问题就开始了stroke-dasharray

我的问题是：动画从两个点开始，一个从开始，另一个在 q 命令之后，只要我使用了两次 move 命令，一个在开始处，一个在 q 曲线命令之后。

我试图一直解决这个问题，但它完全改变了绘制的 SVG。

这是一个片段来解释它如何与我一起工作，

如您所见，它从两点开始，但我需要动画从头开始并直接结束，

请问有什么提示吗？

我有一个使用 svg 的动画。您可以在此处查看该站点：https ://www.demo.simplerwebsites.com

仅用于动画的 Codepen：https ://codepen.io/webbchris2001/pen/wvojzwE

动画是为了“写文字”。它在 Firefox 和 Chrome 上运行良好。然而，由于某种原因，它在 safari 上出现故障并且似乎在眨眼。手机上的 safari 也是如此。

当我添加 from{stroke-dashoffset: 100%;} 它然后在所有浏览器中导致相同的故障。我知道在 Safari 上不接受 stroke-dashoffset 的负值，但是我不相信这里会有任何负值？

Javascript：

CSS：

编辑：事实证明这是我在页面上也有用于轮播的这段 javascript。但是我不明白为什么？