Change svg path with javascript

Question

There is SVG path:

Answer 1

The SVGPathElement interface does not have a d property:

• http://objjob.phrogz.net/svg/object/101
• http://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathElement

As others have said, you can access the data as a big ugly string by using the standard DOM 2 Core method available to all XML applications, myPath.getAttribute('d').

Note that while SVG elements are in the SVG namespace, SVG attributes are not; you should not use myPath.getAttributeNS('http://www.w3.org/2000/svg','d').

However, if you want an object-oriented representation of the path data, you want one of these attributes:

• pathSegList
• normalizedPathSegList
• animatedPathSegList
• animatedNormalizedPathSegList

All of these attributes give you a SVGPathSegList, which is an ordered list (not an array) of SVGPathSeg objects that you can enumerate using numberOfItems and getItem().

Note that SVGPathSeg is a base interface inherited by the more specific objects you get back from getItem():

• SVGPathSegClosePath
• SVGPathSegMovetoAbs
• SVGPathSegMovetoRel
• SVGPathSegLinetoAbs
• SVGPathSegLinetoRel
• SVGPathSegCurvetoCubicAbs
• SVGPathSegCurvetoCubicRel
• SVGPathSegCurvetoQuadraticAbs
• SVGPathSegCurvetoQuadraticRel
• SVGPathSegArcAbs
• SVGPathSegArcRel
• SVGPathSegLinetoHorizontalAbs
• SVGPathSegLinetoHorizontalRel
• SVGPathSegLinetoVerticalAbs
• SVGPathSegLinetoVerticalRel
• SVGPathSegCurvetoCubicSmoothAbs
• SVGPathSegCurvetoCubicSmoothRel
• SVGPathSegCurvetoQuadraticSmoothAbs
• SVGPathSegCurvetoQuadraticSmoothRel

Here's what the usage might look like:

var segments = myPath.pathSegList;
for (var i=0,len=segments.numberOfItems;i<len;++i){
  var segment = segments.getItem(i);
  switch(segment.pathSegType){
    case SVGPathSeg.PATHSEG_LINETO_ABS:
      // segment is a SVGPathSegLinetoAbs object
      console.log( "Absolute Line To", segment.x, segment.y );
    break;
    case SVGPathSeg.PATHSEG_CLOSEPATH:
      // ...
    break;
    // see http://www.w3.org/TR/SVG11/paths.html#DOMInterfaces for constants
  }
}

Answer 2

Try using getAttribute():

alert(document.getElementById('s3').getAttribute("d"));

Answer 3

Attributes can be set another way:

alert(document.getElementById('s3').getAttribute('d'));

That seems to work. To set use setAttribute.

There is a difference between attributes and properties. Attributes are set like <elem attr='value'> and properties are dynamically set.

For example, an input element will not change its attribute when entering something in it. The property, however, will change. So .value would return the correct result, whereas .getAttribute('value') would return the initial value as set with value="something".

In your case, it's an explicit attribute and not a property. Hence, .d does not work whilst .getAttribute('d') does.

http://jsfiddle.net/Kdp4v/