using SVG dom inside a webpage

Question

I would like to use the SVG DOM to manipulate path points (for simplicity in this case). The problem is that the inside on a <svg> tag that lives inside a webpage as follows:

<html>
<head>
    <title>svg dom access</title>
</head>

<body>
    <svg id="SVG">
        <path id="foo" d="M150 0 L75 200 L225 200 Z" />
    </svg>
</body>
</html>

Is it possible to access the svg DOM at all? I would like to run something along the line of:

//get svg dom somehow
var path = document.getElementById('foo');
var segments = path.normalizedPathSegList;

for (var i=0,len=segments.numberOfItems;i<len;++i){
    var pathSeg = segments.getItem(i);
    pathSeg.x = pathSeg.x + someFunction(pathSeg.x); 
}

A jsfiddle can be found here for experimentation.

Edity : I'm really looking to access to SVG DOM if possible. Otherwise i will just rewrite the d tag but id rather not parse the data,, but I will if I must

Answer 1

The only problem in your fiddle is the normalizedPathSegList , which doesn't seem to be implemented consistently, but you can use pathSegList , it'll give the result you want.

var segments = path.pathSegList;

https://jsfiddle.net/73ffn15k/

using SVG dom inside a webpage

Question

1 answers

solution1
2 ACCPTED 2015-07-19 15:03:40

using SVG dom inside a webpage

Question

1 answers

solution1 2 ACCPTED 2015-07-19 15:03:40

solution1
2 ACCPTED 2015-07-19 15:03:40