Accessing SVG from Web Page Script
Problem
You want to modify the contents of an SVG element from script within the web page.
Solution
If the SVG is embedded directly in the web page, access the element and its attributes
using the same functionality you would use with any other web page element:
var square = document.getElementById("ssquare");
square.setAttribute("width", "500");
However, if the SVG is in an external SVG file embedded into the page via an object element, you have to get the document for the external SVG file in order to access the SVG elements. The technique requires object detection because the process differs by browser:
// set element onclick event handler
window.onload=function () {
var object = document.getElementById("object");
var svgdoc;
try {
svgdoc = object.contentDocument;
} catch(e) {
try {
svgdoc = object.getSVGDocument();
} catch (e) {
alert("SVG in object not supported in your environment");
}
}
if (!svgdoc) return;
var square = svgdoc.getElementById('square');
square.setAttribute("width", "500");
EXPLAIN
The first option listed in the solution accesses SVG embedded in an HTML file. You can access SVG elements using the same methods you’ve used to access HTML elements. The second option is a little more involved, and depends on retrieving the document object for the SVG document.
The first approach tries to access the contentDocument property on the object. If this fails, the application then tries to access the SVG document using getSVGDocument(). Once you have access to the SVG document object, you can use the same DOM methods you would use with elements native to the web page. Accessing SVG in an object element from script.
<!DOCTYPE html>
<head>
<title>SVG in Object</title>
<meta charset="utf-8" />
</head>
<body>
<object id="object" data="rect.svg"
style="padding: 20px; width: 600px; height: 600px">
<p>No SVG support</p>
</object>
<script type="text/javascript">
var object = document.getElementById("object");
object.onload=function() {
var svgdoc;
// get access to the SVG document object
try {
svgdoc = object.contentDocument;
} catch(e) {
try {
svgdoc = object.getSVGDocument();
} catch (e) {
alert("SVG in object not supported in your environment");
}
}
if (!svgdoc) return;
var r = svgdoc.rootElement;
// get SVG element and modify
var square = svgdoc.getElementById('square');
square.onclick = function() {
var width = parseFloat(square.getAttribute("width"));
width-=50;
square.setAttribute("width",width);
var color = square.getAttribute("fill");
if (color == "blue") {
square.setAttribute("fill","yellow");
square.setAttribute("stroke","green");
} else {
square.setAttribute("fill","blue");
square.setAttribute("stroke","red");
}
}
}
</script>
</body>
In addition to the different approaches to get the SVG document, you also have to handle browser differences in how the onload event handler works. Firefox and Opera fire the onload event handler for the window after all the document contents have loaded, in‐ cluding the SVG in the object element.
However, Safari and Chrome, probably because of the shared core, fire the window.onload event handler before the SVG has finished loading. In the example code, the object is accessed in script after it has loaded; the object.on load event handler is then accessed to get the SVG document and assigned the function to the onclick event handler.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment