getPointAtLength with SVG not working correctly
There are two possible approaches I can think of to solve your problem.
1. Quick and dirty
As you loop through the path, calculate the distance from the last path point. If that distance exceeds some limit, you can consider that you have stepped into a new subpath. So begin a new polyline.
2. More accurate but trickier
Preprocess the path using the mypath.pathSegList
property. That call returns a list of the path commands in the path.
- Then loop through the pathSegList and take note of where each move command is. These mark the start of each subpath
- As you loop through flattening the path, call the
mypath.getPathSegAtLength()
function. It returns the index of the pathseg entry at that length. - Compare that with the data you recorded in step 1 to see if you have moved into a new subpath
- If you have, start a new polyline (or polygon)
One complication is that Chrome has deprecated support for the pathSegList
property, and have instead moved to the new SVG2 API for this (mypath.getPathData()
). Fortunately there is a polyfill for Chrome to add back support for the old API. Or you can switch to the new API and use a different polyfill so that the new API works on older browsers.
You can find details on the two polyfills here
Change SVG path with JavaScript
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/
Scripting <path> data in SVG (reading and modifying)
It sounds like you may have four questions:
- How do I embed script inside an SVG file?
- How do I run script inside an SVG file?
- How do I access data for a
<path>
element from script? - How can I manipulate data for a
<path>
element from script?
Let's tackle them one at a time:
How do I embed script inside an SVG file?
As described in the SVG specification you can place a <script>
element in your document to contain JavaScript code. According to the latest SVG specifications, you do not need to specify a type
attribute for your script. It will default to type="application/ecmascript"
.
- Other common mime types include
"text/javascript"
,"text/ecmascript"
(specified in SVG 1.1),"application/javascript"
, and"application/x-javascript"
. I do not have detailed information on browser support for all of these, or for omitting thetype
attribute altogether. I have always had good success withtext/javascript
.
As with HTML, you may either put the script code directly in the document, or you may reference an external file. When doing the latter, you must use an href
attribute (not src
) for the URI, with the attribute in the xlink
namespace.
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="/js/mycode.js" />
<script><![CDATA[
// Wrap the script in CDATA since SVG is XML and you want to be able to write
// for (var i=0; i<10; ++i )
// instead of having to write
// for (var i=0; i<10; ++i )
]]></script>
</svg>
How do I run script inside an SVG file?
As with HTML, code included in your SVG document will be run as soon as it is encountered. If you place your <script>
element above the rest of your document (as you might when putting <script>
in the <head>
of an HTML document) then none of your document elements will be available when your code is running.
The simplest way to avoid this is to place your <script>
elements at the bottom of your document:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- all SVG content here, above the script -->
<script><![CDATA[
// Now I can access the full DOM of my document
]]></script>
</svg>
Alternatively, you can create a callback function at the top of your document that is only invoked when the rest of the document is ready:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<title>SVG Coordinates for Embedded XHTML Elements</title>
<script>document.documentElement.addEventListener('load',function(){
// This code runs once the 'onload' event fires on the root SVG element
console.log( document.getElementById('foo') );
},false)</script>
<path id="foo" d="M0 0" />
</svg>
How do I access data for a <path>
element from script?
There are two ways to access most information about elements in SVG: you can either access the attribute as a string through the standard DOM Level 1 Core method getAttribute()
, or you can use the SVG DOM objects and methods. Let's look at both:
Accessing path data through getAttribute()
Using getAttribute()
returns the same string as you would see when you view source:
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
var data = path.getAttribute('d');
console.log(data);
//-> "M150 0 L75 200 L225 200 Z"
]]></script>
- Pros: very simple to call; you don't have to know anything about the SVG DOM
- Con: since you get back a string you have to parse the attribute yourself; for SVG
<path>
data, this can be excruciating.
Accessing path data through SVG DOM methods
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
// http://www.w3.org/TR/SVG/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList
// See also path.pathSegList and path.animatedPathSegList and path.animatedNormalizedPathSegList
var segments = path.normalizedPathSegList ;
for (var i=0,len=segments.numberOfItems;i<len;++i){
var pathSeg = segments.getItem(i);
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg
switch(pathSeg.pathSegType){
case SVGPathSeg.PATHSEG_MOVETO_ABS:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegMovetoAbs
console.log("Move to",pathSeg.x,pathSeg.y);
break;
case SVGPathSeg.PATHSEG_LINETO_ABS:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegLinetoAbs
console.log("Line to",pathSeg.x,pathSeg.y);
break;
case SVGPathSeg.PATHSEG_CLOSEPATH:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegClosePath
console.log("Close Path");
break;
}
}
]]></script>
The above script produces the following output:
Move to 150 0
Line to 75 200
Line to 225 200
Close Path
Pros: path data is parsed for you; you get exact numbers from the API itself; using
normalizedPathSegList
takes relative commands and makes them absolute for you; if SMIL animation is changing the path data, using the non-animated pathSegList can give you access to the base, non-animated information not available viagetAttribute()
.Cons: Sweet chimpunks a-flame, look at that code! And that doesn't even handle all the possible path segments available.
Because it can be hard to read the W3C specs for SVG DOM, many years ago I created an online tool for browsing what properties and objects exist. You may use it here: http://objjob.phrogz.net/svg/hierarchy
How can I manipulate data for a <path>
element from script
Similar to the above, you can either create a new string and use setAttribute()
to shove it onto the object, or you can manipulate the SVG DOM.
Manipulating path data using setAttribute()
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
path.setAttribute('d','M150,0 L150,100 200,300 Z');
]]></script>
Manipulating path data using SVG DOM
<path id="foo" d="M150,0 L75,200 l150,0 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
var segments = path.pathSegList;
segments.getItem(2).y = -10;
]]></script>
In general, you just have to modify the properties of the various SVGPathSeg
subclass instances; the changes are made immediately in the DOM. (With the above example, the original triangle is skewed as the last point is moved up slightly.)
When you need to create new path segments, you need to use methods like var newSegment = myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false)
and then use one of the methods to stick this segment into the list, e.g. segments.appendItem(newSegment)
.
Extract x,y coordinates from arbitrary SVG path with javascript
Just use the SVG DOM to parse it there are more details in this question/answer but basically you do
var segments = path.pathSegList;
and that gives you an array of segments and values you can read or write e.g.
segments.getItem(0).y = -10;
Related Topics
Will Html5 Allow Web Apps to Make Peer-To-Peer Http Connections
Adding Additional Data to Select Options Using Jquery
Why Should Y.Innerhtml = X.Innerhtml; Be Avoided
How to Hide a ≪Option≫ in a ≪Select≫ Menu With Css
Animating Addclass/Removeclass With Jquery
Disable Drag and Drop on HTML Elements
How to Run Untrusted Code Serverside
"Thinking in Angularjs" If I Have a Jquery Background
How to Remove a Specific Item from an Array
Script Tag Create With Innerhtml of a Div Doesn't Work
Get Local Href Value from Anchor (A) Tag
How to Prevent JavaScript Injection Attacks Within User-Generated Html
Angularjs to Output Plain Text Instead of Html
How to Make a Div Stick to the Top of the Screen Once It's Been Scrolled To
Get the Device Width in JavaScript
Combine and Minify Multiple Css/Js Files
Node.Js App Can't Run on Port 80 Even Though There's No Other Process Blocking the Port