问题标签 [svg-path]

是否有任何解决方案可以将电池框架显示red:fill为进度填充而不覆盖rect？

我正在尝试为圆角矩形绘制路径，其中边是可选的，但有一些困难。我发现并看到了类似的问题，但这些函数要求提供现有的路径数据。我从头开始。

该函数如下所示：

如果我知道该怎么做，我就不会在这里问了。

用户可以说：

它将创建一个具有三个边的矩形，其中矩形的底线未绘制。

或者对于一个完整的矩形，他们会这样写：

我已经尝试了几个小时通过编辑路径元素来编辑我的 SVG，但我无法得到我想要的结果：

代码如下所示：

渲染的图形如下所示：

我想要做的是编辑内黑圈；我需要删除圆圈的右半部分。

我搜索了解释如何做到这一点的网站，但没有发现任何有用的东西。

是否可以将代码粘贴到 SVG 编辑器中，然后编辑图像并取回代码？

帮助将不胜感激。

我正在尝试将 SVG 中断开的路径转换为 ​​SVG 行。例如，如果我使用

然后转换后，我应该得到 3 条 SVG 线

并且这条路径可以断开，它可以有多个 Moveto 命令，例如

在这种情况下，我应该得到 6 条 SVG 线。moveto 和 lineto 命令也可能是绝对的和相对的有什么帮助吗？谢谢

我提取了一些数据，缩放后，我画了一堆圆圈。这很好用。

现在，我想把这些点连起来。我见过的大多数例子都是关于条形的，而不是线条，所以我用谷歌搜索了更多的折线图并决定使用路径元素，就像这样。

屏幕上没有出现任何新内容，由于无知，我不知道该戳哪里看看出了什么问题。

1. 我应该使用路径（还是line，polyline等更好的选择）？
2. 我应该使用d属性还是有更合适的属性？
3. 我应该应用d3.svg.line()函数还是有更流畅的方法？

我有一个要求，我想将 SVG 路径转换为 ​​2 条路径。这两条路径一起应该等同于原始路径。我有一些代码可以做到这一点。但输出并不准确。我想我不知道路径命令如何工作的一些基本概念。

为我想要转换的原始路径小提琴： https ://jsfiddle.net/q4r8zcqp/4/

小提琴我使用我的算法创建了 2 条路径：https ://jsfiddle.net/9fh3rxs7/4/

因此，如果您检查小提琴，则在第二小提琴中可以看到一条额外的线，但我没有得到它的原因。

显示那条额外线的原因是什么？关于这两种路径或任何实现方式的区别有什么帮助？谢谢

我正在为 Google 地图标记使用自定义图标。我想将样式应用于标记；特别是线性梯度。当我将下面的 xyz 代码作为简单的 HTML 文档正常运行时，它可以正常工作，但是当我尝试在 Javascript 中运行它时，它就不起作用了。

欢迎任何解决方案。

我正在尝试制作一个工具来绘制任意图形，如本例中的 -线条图fill，但使用带有- 不的路径本身stroke。这是我已经完成的 - https://jsfiddle.net/zeleniy/b14paam2/。示例已经包含单个任意路径图形，但您可以使用拖动自己绘制。

如您所见，有两个麻烦：

1. 笔尖是倾斜的，我不知道为什么。因此，当从右上角到左下角绘制对角线或反之亦然时，路径几乎不可见。

2. 在路径与自身相交的地方没有填充。

如何解决这个问题？

I am using a couple of functions from Snap.SVG, mainly path2curve and the functions around it to build a SVG morph plugin.

I've setup a demo here on Codepen to better illustrate the issue. Basically morphing shapes simple to complex and the other way around is working properly as of Javascript functionality, however, the visual isn't very pleasing.

The first shape morph looks awful, the second looks a little better because I changed/rotated it's points a bit, but the last example is perfect.

So I need either a better path2curve or a function to prepare the path string before the other function builds the curves array. Snap.SVG has a function called getClosest that I think may be useful but it's not documented.

There isn't any documentation available on this topic so I would appreciate any suggestion/input from RaphaelJS / SnapSVG / d3.js / three/js developers.

我有一个已经绘制的 SVG，如下所示。它有一组垂直路径。有没有简单的方法来获取它们每个的 x 坐标？