Question

我正在尝试使用jquery和svg，我编写了我的路径，但现在我想改变它（基于一些用户输入）我做了类似的事情

    var dpath = $('path').attr("d");
    $('path').attr("d",dpath.replace("150 150", "450 450"));

工作正常，但是当我的路径增长时这没用，所以我想知道是否有可能在路径中放置标签或注释作为替换钩子？搜索“svg path comments”会在论坛中为所有条目提供“评论”，这不是很有用。我接近编写自己的“可替换”伪svg路径代码，但在svg中是否还有其他选择？问候，的Jeroen。

Answer 1

SVG具有路径元素的非序列化形式的接口。它的描述在the SVG spec。您应该能够通过添加自己的属性来扩展对象以作为标记。

我从未使用过该接口，但您应该能够通过使用path SVGAnimatedPathData中的pathSegList属性来访问路径段列表，方法是$("path")[0].pathSegList。（[0]用于获取实际的DOM元素而不是jQuery对象）

Answer 2

大多数pathSegList方法需要检索/操作段的索引，因此可能存在序列化表示更可取的情况。将0个单位（例如'm 0,0'）的相对移动作为替换钩子。因为你有相对绘图的不同路径命令，你甚至可以将你的钩子归因于上下文。请注意，如果您考虑“m 0，m 0， - ”之类的模式，则nops数量是无限的 - 您的里程可能会因svg生成器的质量而异。

请注意，js replace方法对正则表达式进行操作，因此您根本不需要替换钩子来附加或添加路径段。

最好的问候，carsten

PS：我知道马蒂斯的答案已经存在了很长时间......

Answer 3

这是一个使用jQuery SVG移动行的终点的示例：

$('#svgdiv').svg();                           //svgdiv - the id of the html element that contains your svg canvas.
var svg = $('#svgdiv').svg('get');
var linePath = $($('#linePath'), svg.root()); //linePath - the id of the path element whose end point coordinates I want to change.
var segments = linePath[0].pathSegList;
for (var i=0; i < segments.numberOfItems; i++){
  var segment = segments.getItem(i);
  switch(segment.pathSegType){
    case SVGPathSeg.PATHSEG_LINETO_ABS:
    segment.x = x;
    segment.y = y;
  //other cases..
  }
}

如果您在同一路径中有多个线段，并且想要更改特定的细分，则需要

通过将pathSegList段索引存储在变量中来跟踪该行。
或者如果用户输入是鼠标单击，请使用鼠标单击坐标查找该段。

This关于SVGPathElement的好文章。 This是SVG DOM文档。

svg路径中的注释

3 个答案: