问题标签 [stroke-dasharray]

我正在为一些属于箭头图标的笔画制作动画，这在所有浏览器（包括 IE11）中都非常有效，但 Safari 除外。出于某种原因，当在规则stroke中设置破折号时，Safari 会呈现黑色小斑点。我的代码如下：0stroke-dasharray

在 Safari 中运行以下代码段以重新创建问题。

有谁知道为什么在 Safari 中会发生这种情况，以及如何解决它，以便当 astroke-dash设置为0.

我想为按钮元素创建边框动画。设计是倾斜矩形的末端是打开的，然后在悬停时关闭。

这就是我们正在尝试做的（请原谅我的艺术“风格”）：

这是一些代码和一个codepen示例：

代码笔示例

我无法理解stroke-dasharray背后的数学，但似乎没有太多复杂的数学应该是可能的。

另一个问题是它需要响应。所以按钮可以包含不同数量的文本。

如果您需要进一步说明，请告诉我。

我在这里使用 gsap 我正在尝试做中风动画，我知道了。但问题是完整的 SVG 没有来 半图标来了 我试着改变 strokeDashoffset 它可能是 getTotalLength(); 的问题 谁能帮我解决这个问题。

我正在使用 stroke-dashoffset 技术创建动画书法，将笔画作为动画蒙版应用到 SVG 之上。这适用于大多数浏览器，但我想在 PNG 上应用相同的掩码。这样，即使浏览器在处理 SVG 和掩码（IE...）时都有问题，至少它会按原样显示 PNG。

这是带有纯 SVG 的工作书法的代码笔： https ://codepen.io/benviatte/pen/PMzmYB

这是非工作书法的代码笔，我在其中放置了图像而不是基本 SVG。它只是显示空白，除非我删除“mask-image”属性，在这种情况下它不会动画： https ://codepen.io/benviatte/pen/eqzWzJ

最后，这里是只显示空白的 PNG 版本的代码： HTML：

CSS：

太感谢了！！！

对此处给出的解决方案的补充 - >是否可以仅为 d3 js 中树布局的子节点到子节点绘制虚线链接

在上面的例子中，我对过渡动画的 CSS 做了一些小的改动。下面给出了对 CSS 的更改，

它为破折号设置动画，并将运动显示为向前或向后的路径。此处给出的示例演示。但是我需要能够控制哪些虚线移动？我需要能够控制哪些虚线在节点之间移动以及不同节点之间的连接，以便我可以控制那里的动画。我查看d了下面的代码，

但我不确定是否需要控制源或目标以及是否可以为每个源附加样式？如何只控制单个节点及其连接？

我正在尝试在 SVG rect 元素上实现基于百分比的类似边框的效果，如下图所示。我被告知我需要使用stroke-dasharray它来执行此操作，但是尽管使用了 JSFiddle，但我一直无法找到一种普遍适用于任何高度和宽度的 SVG 的解决方案。任何帮助或建议将不胜感激。

这是我目前在 JSFiddle 中使用的内容：

所需功能的图像

我有一个通过更改stroke-dashoffset路径属性来更新的进度条。但是，每次更新时，我都需要计算海军路径端点（圆边）的 x 和 y 坐标。将来我将在这些点添加标签。一段时间以来，我一直在为这个问题头疼。我尝试过使用类似的东西const x = radius * Math.sin(Math.PI * 2 * angle / 360);，const y = radius * Math.cos(Math.PI * 2 * angle / 360);但我认为我没有正确使用它们。有人可以帮助我吗？旁注我只使用 Vanilla JS。

我正在尝试在 Angular8 中创建一个 SVG。

它应该看起来是彼此面对的圆圈。我用这样的计算段创建了 2 个圆圈：

我想做的事：

创建一个从段到段的“缓慢绘制效果”的动画效果。

我尝试在<style>标签中添加过渡以创建绘图效果，但未成功

任何人都可以对此有所了解吗？

我想我不太明白这里的一些东西。stroke-dasharray 中的百分比单位与什么有关？我在考虑相对于 SVG 视图框，但我可能错了。

我的问题：我有一个宽度为 320 像素、高度为 160 像素的 SVG。在这个 SVG 中，我画了一条从 x1 = "0%" 到 x2 = "100%" 的线，因此它的宽度与 SVG 一样为 320px。

然后我给出这条线： stroke-dasharray: 100% 100%;

令我惊讶的是，这条线不是用 SVG 的全宽绘制的，而是只有 80% 左右。

我想我不太明白这里的一些东西。stroke-dasharray 中的发音单位与什么有关？我在考虑相对于 SVG 视图框，但我可能错了。

我的问题：我有一个宽度为 320 像素、高度为 160 像素的 SVG。在这个 SVG 中，我画了一条从 x1 = "0%" 到 x2 = "100%" 的线，因此它的宽度与 SVG 一样为 320px。

然后我给出这条线： stroke-dasharray: 100% 100%;

令我惊讶的是，这条线不是用 SVG 的全宽绘制的，而是只有 80% 左右。

如果有人有想法，我很高兴收到您的来信

这里是一个示例的链接：https ://codepen.io/stefka1210/pen/xxVwBom

我有一个 geoJSON 时间序列数据，其中每个时间步长都告诉绕地球运行的物体的坐标（经度/纬度）。我想为路径设置动画。

我看过各种讨论如何使用 stroke-dasharray 为路径设置动画的帖子。但是，当我使用它时，我得到了一种奇怪的效果，动画从多个位置开始，而不是在起点以一个连续的动作顺序动画。

任何人都可以轻轻地提供有关为什么会发生这种情况的指示吗？我怎样才能将路径动画化为一个单一的动作？

html

简化的.js

json.js

编辑： 视频：https ://imgur.com/a/1xY22OS

路径属性