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