svg 路径中的注释答案

【问题标题】：comments in svg pathsvg 路径中的注释
【发布时间】：2010-04-04 11:19:00
【问题描述】：

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

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

这很好用，但是当我的路径增长时这没有用，所以我想知道是否有可能在路径中放置标签或注释作为替换挂钩？搜索“svg path cmets”会给我论坛中所有带有“cmets”的条目，这不是很有用。我即将编写自己的“可替换”伪 svg 路径代码，但在 svg 中是否有替代方案？问候，杰罗恩。

【问题讨论】：

标签： svg

【解决方案1】：

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

我从未使用过该接口，但您应该能够通过使用 pathSegList 属性（在SVGAnimatedPathData 中定义）通过执行$("path")[0].pathSegList（@987654325 @ 是为了获取实际的 DOM 元素而不是 jQuery 对象）

【讨论】：

查看dev.w3.org/SVG/profiles/1.1F2/test/svg/paths-dom-02-f.svg 的示例。
[0] 对于获取 pathSegList 属性至关重要。

【解决方案2】：

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

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

最好的问候，卡斯滕

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

【讨论】：

【解决方案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 文档。

【讨论】：