问题标签 [svg-path]

我有 python 代码来创建一个贝塞尔曲线，我从中创建一个贝塞尔路径。

这是我的进口：

这是我的代码：

我想创建一个组成这条曲线的坐标列表，但我正在阅读的文档都没有提供直接的方法来做到这一点。bezier_curve 和 bezier_path 只有起点、终点和控制点的参数。

这有点难以解释，所以我将首先链接到演示问题的 CodePen，并要求您在 IE11 中打开它以查看问题，并要求您在另一个浏览器（例如 Chrome）中查看预期行为：https ://codepen.io/malcalevak/pen/OmPExK

它的要点是我正在尝试绘制 SVG 路径，并且我已经设置了 stroke-dasharray 以匹配路径的长度，然后将我的 SVG 偏移该长度（在示例中，我已经移动它，所以你会看到发生了什么）。然后我使用 Greensock 将 stroke-dashoffset 转换为 0（或示例中的 250）。起初，我以为它只是在 IE11 中被破坏了。我什至尝试手动更改 CSS 和内联值无效。但是，在改变了 stroke-dashoffset 之后，我看到了发生了什么。似乎 IE11 采用了原始的 stroke-dashoffset，并创建了一个永久的、不可移动的破折号！您可以移动破折号阵列，但它仅在原始破折号周围可见。所以在 CodePen 中，我有我的 CSS：

这个奇怪的“固定破折号”将我限制为只能在 500 和 545 之间制作动画......你可以在我的第二个补间中看到：

最初，您应该将线从 545 绘制到 500，将 1 秒的动画绘制到 250，然后再用 1 秒的动画将其缩短到 520。这在 Chrome 中有效，但在 IE11 中，我得到的只是一个微小的变化，之后延迟，从 500 到 520。

让我感到困惑的是，我在任何地方都找不到这个文档！

谁能解释发生了什么？

我会说我有一些替代解决方案来做我需要的事情，我只是想了解它为什么会发生，等等！

我有这张图表。

如您所见，我插入了两条路径。

圆圈上有鼠标悬停监听器。

现在的问题是，一个path覆盖另一个和属于它的圆圈，当悬停在底层圆圈时不会触发事件。

我的意思是这个圆圈：

我画这样的线条和圆圈：

有没有办法在底层圈子上触发事件，还是我必须使用path标签以外的东西？

帮助将不胜感激。

这些路径之间有一条线；为什么？

（在我的机器上看起来像这样：）

stroke即使没有（很难看到，但它仍然存在），也会发生类似的问题。我很困惑为什么会这样；如果我有两个三角形是正方形的一半，为什么我不只看到一个正方形？有没有办法防止这种情况？

（在我的机器上看起来像这样：）

更现实的例子（我试图摆脱具有几乎相同填充/描边属性的三角形之间的线条）：

我有一个 svg 路径，我想知道我的鼠标是否在 svg 路径上，如果我想将光标更改为鼠标指针。

这可以通过在路径上添加鼠标悬停属性以及识别点（x，y）在 svg 路径内部或 使用此解决方案外部来轻松完成。

但是有一个转折点，我在它上面有另一个透明层，因此我无法拥有这两种解决方案。

现在我正在让顶层不显示，它工作正常。但正因为如此，我的鼠标指针和我所做的动作（例如在鼠标移动时移动某个元素）很慢，

因此我想知道是否有任何其他更好的方法而不使显示等于无。

请找到小提琴示例，我想在 mypath 元素上将光标更改为指针，并且还希望 myline 在我将鼠标移到图层上时移动，我可以暂时在图层上显示为无，但我注意到firefox，线条移动不是那么流畅，

https://jsfiddle.net/shyam_bhiogade/9a7zuou2/6/

我有一个 SVG 计时器。有一条路径可以显示当前状态。但是正如您在我附加的屏幕截图中看到的那样，路径重叠严重：

此屏幕截图的检查器中的代码是：

这是生成 SVG 的方式：

黑色路径外的这条丑陋的白线很糟糕。如何摆脱这个？有没有抗氧化作用？

另一种选择是在黑色路径上执行 margin-top:-1px 。但是在哪里做呢？

编辑：这是 ccprog 建议后的计时器：

我有一个 svg，我正在使用带有转换的图层创建。我正在尝试基于图像创建一个图案来填充它作为背景，但背景出来很奇怪：

有人可以帮我弄清楚这个svg发生了什么，我怎样才能使背景“正确平铺并填充我想要填充的所有路径”？

614 上的背景图像是 1000，所以它非常大。

这是我的svg：

我正在尝试在两个 SVG 视图之间转换d3.js。目的是能够在显示之间交替：

• 经典的等值线图（颜色代表测量值的地图）
• 半径与区域人口成比例的气泡图

请参阅此处进行演示。

然而，从任意 SVG 路径过渡到（近似的）圆并不简单。我有以下问题：

1. 地图区域可能包含岛屿或飞地；更一般地说，SVGpath可能包含独立的环。（我原以为d3会将多多边形渲染为几个paths 但没有！）另一方面，一个圆仅由一个环组成。在过渡期间如何平滑较小的多边形？（我认为将环合并在一起太复杂了，不值得。）我考虑过淡化或缩小多边形，但在实践中如何实现呢？因为我不确定是否可以在 a 的d属性中挑出一个环path。
2. 小区域由几个点表示，将这几个点过渡到一个圆上会产生一个顶点太少的多边形，看起来像一个实际的圆（见下图）；在 a 的属性中平滑添加点的好策略是什么？dpath;
3. 或者，也可以将直线过渡到 Bézier 曲线，而不是向虚线添加点（4 个点和足够的锚点已经产生了一个非常好的近似圆）。由于我自己的尝试没有说服力，这里是第三个问题：直线和贝塞尔曲线之间如何过渡？
4. 最后，在两个方向的过渡开始时，我会在某些（但不是全部）形状中看到尖峰/条纹；知道这可能来自哪里吗？

我在 HTML 中有以下 svg，它在我的台式机上的所有浏览器上都可以正常工作。基本上，它在 IE、Chrome 和 Firefox 中显示了一个点，这就是我想要的，它应该显示。但是我的表面设备上的 chrome 没有显示路径，请告诉我如何修复它。