jQuery修改SVG Path

http://stackoverflow.com/questions/2574237/comments-in-svg-path

SVG has an interface to the unserialized form of the path elements. Its description is in the SVG spec. You should be able to extend the objects by adding your own properties to serve as markers.

I've never used the interface, but you should be able to access a list of the path segments by using the pathSegList property (defined in SVGAnimatedPathData) by doing something along the lines of $("path")[0].pathSegList (the [0] is there to get to the actual DOM element instead of the jQuery object)

This is an example in which the end point of a line is being moved using 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..
  }
}

If you have multiple line segments in the same path and want to change a particular segment, you would need to

• keep track of the line by storing the pathSegList segment index in a variable.
• or if your user input is a mouse click, use the mouse click coordinates to find the segment.

This a good post about SVGPathElement. This is the SVG DOM documentation.