SVG路径中的注释

Question

我正在尝试使用jquery和svg，我创建了自己的路径，但现在我想改变它（基于某些用户输入）。我可以像这样做：

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

这很好用，但是当我的路径增长时就不再有用了。因此，我想知道是否有可能在路径中放置标签或注释作为替换钩子？搜索“svg路径注释”会得到所有包含“注释”的论坛条目，这不太有用。我几乎要写自己的可替换伪svg路径代码了，但是svg中是否有其他可能性呢？ 谢谢， Jeroen。

- dr jerry

Answer 1

SVG具有与路径元素的非序列化形式交互的接口。其描述在SVG规范中。您可以通过添加自己的属性作为标记来扩展对象。

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

- Matti Virkkunen

---

请查看http://dev.w3.org/SVG/profiles/1.1F2/test/svg/paths-dom-02-f.svg以获取示例。 - Erik Dahlström

获取 [0] 是关键，以获得 pathSegList 属性。 - shaosh

Answer 2

这是一个使用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段索引存储在变量中来跟踪该线段。
• 或者，如果您的用户输入是鼠标单击，请使用鼠标单击坐标找到该线段。

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

- rolnn

Answer 3

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

请注意，js replace方法基于正则表达式运行，因此对于附加或前置路径段，您根本不需要替换钩子。

最好的问候，卡斯滕

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

- collapsar