Search notes:
SVG/JavaScript example: access-root-element
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Simple embedded SVG test</title>
<script>
function main() {
var html_object = document.getElementById('inkscape-drawing');
var svg_document = html_object.getSVGDocument(); // or alternatively: html_object.contentDocument;
// var svg_document = html_object.contentDocument;
var svg_root_elem = svg_document.rootElement; // or alternatively: svg_document.documentElement;
var svg_width = parseFloat(svg_root_elem.getAttribute('width'));
console.log("html_object = " + html_object); // [object HTMLObjectElement]
console.log("svg_document = " + svg_document); // [object SVGDocument]
console.log("svg_root_elem = " + svg_root_elem); // [object SVGSVGElement]
console.log("svg_width = " + svg_width); // 150
}
</script>
</head>
<body onload='main()'>
<object
id ="inkscape-drawing"
type="image/svg+xml"
data="inkscape-simple.svg"
/>
</body>
</html>
Note: the value of the
data attribute of the
<object> elements is the name of an
SVG file (that was created with
Inkscape ).
Apparently, this example does not work if run on a local file system because (for security reasons?) getSVGDocument returns null in such a case. Instead, the example must be run over HTTP.
