Scalable Vector Graphics 0r SVG is the new XML-based graphics standard from the W3C that will enable Web documents to be smaller, faster and more interactive.
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" );
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.
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.
<!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, including 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.
No comments:
Post a Comment