Menu
Can anyone really really help me, please? I've been searching for ways to run scripts for my SVG. But all the things i got doesn't match up! And it doesn't contain enough information why he used that set of codes. For example, one used event.target, another had event.getTarget(), and another had event.target.firstchild.data. Can anyone help me, please?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg> is an example of a path svg right? What i need is to get those coordinates, probably put it in a variable, and use it as coordinates for another svg. So how can i do that? Another thing is how can i change those coordinates by entering numbers in an interface.
So i tried to look for answers, but like i said, i didn't find the info i needed or maybe i just didn't i understand what it showed me.
970
Changing Attribute Values Once you have obtained a reference to the SVG element you can change its attributes using the setAttribute() function. Here is an example: var svgElement = document. getElementById("rect1"); svgElement.
A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. A path can be used for more than one of these functions at the same time.
The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute.
It sounds like you may have four questions:
<path> element from script?<path> element from script?Let's tackle them one at a time:
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".
"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 the type attribute altogether. I have always had good success with text/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> 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> <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:
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> <path> data, this can be excruciating.<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 via getAttribute().
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
<path> element from scriptSimilar 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.
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> <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).
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
