comments in svg path

Question

I'm experimenting with jquery and svg, I make up my path but now I want to change that (based on some user input) I do something like

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

which works fine, but this not useful when my path grows, so I wonder is there a possibility to put a label or a comment in the path to serve as a replace hook? searching for "svg path comments" gives me all entries in forums with 'comments', which is not very useful. I'm close to write my own "replaceble" pseudo svg path code, but is there an alternative possible in svg? regards, Jeroen.

score 4 · Accepted Answer · answered Apr 04 '10 at 11:23

4

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)

answered Apr 04 '10 at 11:23

Matti Virkkunen

63,558
9
127
159

2

Check http://dev.w3.org/SVG/profiles/1.1F2/test/svg/paths-dom-02-f.svg for an example. – Erik Dahlström Apr 06 '10 at 09:20
That [0] is crucial to get the pathSegList property. – shaosh Jan 28 '15 at 18:04

score 0 · Answer 2 · answered Mar 23 '11 at 08:23

most of the pathSegList methods need the index of the segment to be retrieved / manipulated, so there may be scenarios in which the serialized representation is preferable. take relative movement by 0 units ( eg. 'm 0,0') as a replace hook. as you have different pathh commands for relative drawing you may even attribute your hooks with context. note that the number of nops is infinite if you consider patterns like 'm 0, m 0,-' - your mileage may vary depending on the quality of your svg generator.

note that the js replace method operates on regular expressions so you would not need a replacement hook at all for appending or prepending path segements.

best regards, carsten

ps: i know mattis answer has been around for a long time ...

score 0 · Answer 3 · edited May 23 '17 at 10:34

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.

comments in svg path

3 Answers3