SVG - 如何剪切<路径>一半？
我需要在 JavaScript 中的特定点剪切现有路径（曲线）。例如，如果我有以下路径：
<path stroke-width="3"
stroke="black"
stroke-linecap="round"
stroke-linejoin="round"
id="line_test"
d="M125,165 C125,165 125,164 125,164">
</path>
从那里，我可以像这样获得中点：
var line = document.getElementById("line_test");
var length = line.getTotalLength();
var midpoint = line.getPointAtLength(length/2);
一旦获得该中点，我想完全删除路径的其余部分。有没有一个函数可以让我获得子路径？绘图库对我来说并不是一个真正的选择。
I need to cut an existing path (curve) at a specific point in javascript. For example, if I have the following path:
<path stroke-width="3"
stroke="black"
stroke-linecap="round"
stroke-linejoin="round"
id="line_test"
d="M125,165 C125,165 125,164 125,164">
</path>
From that, I could get the midpoint like so:
var line = document.getElementById("line_test");
var length = line.getTotalLength();
var midpoint = line.getPointAtLength(length/2);
Once I get that midpoint, I want to remove the rest of the path completely. Is there a function that will allow me to get a subpath? A drawing library isn't really an option for me.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的，它被称为 getPathSegAtLength （在路径元素上可用），它返回到<一href="http://www.w3.org/TR/SVG11/paths.html#__svg__SVGAnimatedPathData__pathSegList">pathSegList，该索引可以用于对那里的 pathSegList 进行切片。
pathSegList 是一个类似数组的列表，如果您使用某些最新的浏览器，可以使用普通的数组表示法来逐步浏览列表，但现在使用 SVG 1.1 中定义的接口更加兼容。
Yes there is, it's called getPathSegAtLength (available on path elements) and it returns an index into the pathSegList, that index can e.g be used to slice the pathSegList there.
The pathSegList is an array-like list, and if you use some of the very latest browsers you can use normal array notation to step through the list, but it's more compatible to use the interface defined in SVG 1.1 right now.