simplest way to use javaScript to parse SVG path string to extract initial x,y coordinates

2024/2/27 8:20:29


  <path d="M 5,10 l0,0 l 15 ,0l0,15l-15,0l0,-15 z" ....

The first 2 digits after M are the x,y coordinates for the starting point of the SVG path.


returns the x cordinate (5) and


returns the correct y coordinate. The problem is the values may be single or double or triple digit numbers which will break the substr() way of doing it.


Browsers have a parser built in, use it or you'll just spend your life on wheel reinventing and bugfixing.

Note for Chrome, you'll need to use a polyfill

var path = document.getElementById("p");
var item1 = path.pathSegList[0];
alert("first co-ordinate is " + item1.x + ", " + item1.y);
<path id="p" d="M 5,10 l0,0 l 15 ,0l0,15l-15,0l0,-15 z"/>

Related Q&A

Prevent Overriding Javascript Function

Im using a Modular Pattern in JavaScript. I wonder if we can prevent the public modules to be overridden. For example, in the code below function1, function2, function3 and function4 can be accessed ou…

Is there a way to use Canvas in IE7 or IE8?

Is there any workaround to use "Canvas" tag in IE7 and IE8 ? Pls let me know. <input type="text" id="textSign" value="Sign" /> <input type="but…

Parse a string that contains data bindings in AngularJS

I have a backend rendered template that returns a JSON object that contains a string that needs some dynamic data bindings for example...sampleLogic = {"1": "Sample static text and some …

It is necessary to detach the element error in google docs script

When I try to copy paragraphs form one doc to another I get unexpected error: It is necessary to detach the elementWhat does it mean? What am I doing wrong?function test_copy_paragrahps() {var final …

webkit stylewithcss contenteditable not working?

Im trying to use contenteditable and styleWithCss.It doesnt seem to work in webkit.Anytime I use do an execCommand, it generates a <b> rather than the span I expected.Heres a demo: http://jsbin.c…

Why do both [] == true and ![] == true evaluate to false?

I have two statements like this. Why do they both evaluate to false?console.log([] == true)console.log(![] == true)If [] == true is false shouldnt ![] == true result to true?

Is empty string treated as falsy in javascript?

Ive noticed that if you have a statement as the following:var test = "" || nulltest will evaluate to null but if we do something like the following:var test = "test" || nulltest wil…

How can I sort a javascript array while ignoring articles (A, an, the)?

I have the following sort function to sort a list of books:var compare = function(a, b) {var aTitle = a.title.toLowerCase(),bTitle = b.title.toLowerCase();if (aTitle > bTitle) return 1;if (aTitle &l…

What is the point of Javascript Constructor?

Please provide your thoughts with respect to Javascript only! I am aware of classes and classical inheritance but not at a great detail.As far as I know, constructors are used as prototypes for other o…

Parsing CSS background-image

How do I parse CSS background-image, which supports multiple values, which may be none and functions (e.g. url() and linear-gradient()) with multiple comma-separated arguments? I cant seem to do this …