问题标签 [stroke-dasharray]

所以，我在滚动时使用下面的 SVG 动画代码。该代码似乎适用于 Chrome、Safari 和 Opera 浏览器，但我不知道为什么笔画动画在 Mozilla Firefox 和 IE 中不起作用。

这里的例子：jsfiddle

我已经非常接近满足我的需要。只是我尝试玩计算但卡住的一个小问题。片段：

我只需要一点帮助就可以使圆形路径动画从顶部开始。我猜我的计算有问题。我只需要这样的动画。但是它使用了我不想使用的第三方 js 插件。

还有什么方法可以将 css 嵌入到 SVG 中，以便我们可以将图形作为 .svg 动画而不是将 svg 代码放入 html 文件中？

我正在尝试在 svg 中创建一个矩形，在顶部和底部有一个边框/笔划，并使用半径（rx，ry）使用圆角。通过使用 css 属性“dasharray: width, height”，可以仅使用边框/笔划设置顶部和底部的样式。没有半径，这可以按预期工作。

但是，添加半径后，顶部边框不再从矩形的左上角开始。我试图通过使用 css 属性 dash-offset 来纠正这种行为，但这似乎使顶部边框部分消失（尽管它似乎适用于底部边框）。

非常感谢有关如何创建具有半径且只有顶部和底部边框的矩形的任何帮助，以及对正在发生的事情的一些见解。

参见小提琴：https ://jsfiddle.net/Lus8ku7p/

我需要创建一个 svg 形状，具有这种外观：

我正在尝试使用属性 stroke-dasharray 和 stroke-dashoffset 来实现这一点，但我做不到。

例子：

http://jsfiddle.net/L9y6Ld97/

CSS：

HTML：

我有一个由几个圆圈组成的 SVG。目标是使用破折号阵列技术使用不同的百分比填充不同的圆圈。

目前，只有圆圈“一”（参见带有 的圆圈标签class="one"）是“满的”。其他两个（“二”和“三”）为 0。

但是当在 Safari 中查看 SVG 时，我得到了一个奇怪的人工制品。如果最后生产但订单很重要，我可以解决这个问题，circle.one所以如果可能的话，我不想改变。

代码笔：https ://codepen.io/codeload/pen/KXvLEp

I have an SVG polygon that I am attempting to animate the stroke for, however I have an issue where I can't get all four corners to appear to be joined together once I start using stroke-dasharray.

Here is an example:

It doesn't really seem to matter how I handle the dash array or the offset, the top corner is always disconnected.

Is this just a pitfall of dealing with SVG, or is there something that can be done to fix it?

对于我正在进行的项目，我必须能够描述从 -100% 到 100% 的值。有什么方法可以让我采用现有的百分比圆圈（例如下面的圆圈）并使进度指示器向后退 - 就像逆时针方向一样？

CSS：

这是codepen的链接：https ://codepen.io/killia15/pen/zRqvxP

所需输出的图像

我有一个 SVG 路径，我正在尝试使用stroke-dasharray/stroke-dashoffset组合技巧为“绘制”自身设置动画（有关更多信息，请参阅本文）。但是，尽管（据我所知）一切都已正确实施，但该技巧在此路径上不起作用。所以，我的问题是，我在这里做错了什么？

这是有问题的路径：

还有我正在使用的 CSS（例如简化）：

我努力了：

• 调整dashoffset/的长度dasharray
• 在其他浏览器中测试（Safari 11.0.3、Firefox 57.0.4）

不太确定要做什么，或者发生了什么，所以任何关于为什么这个动画不起作用的指导将不胜感激。

另外，我在 JSFiddle 上创建了一个简化的案例。

主要环境：Chrome v64.0.3282.140

我有一个宽度为 90vw 且 stroke-dasharray 为 0 90vw 的 svg 路径，以生成一个可以沿一条线设置动画的点。这适用于 Chrome，但 Safari 会遍历整个路径。它似乎不喜欢这里的 vw 单位，尽管它在 stroke-dashoffset 属性中很好，我在网上找不到任何提及。关于我如何格式化属性，我有什么明显的遗漏吗？

谢谢

我做了一个css动画，但我没有动画反转。我尝试了动画的变体版本，但没有。它有一些错误。