Game Development Reference
In-Depth Information
However, if the SVG is external to the HTML, we need to take one extra step and
load in the actual SVG file into the JavaScript variable. Once this step is done, we
can work with the SVG's subtree as though it is local to the file.
<body>
<object type="image/svg+xml"
data="red-circle.svg"
width="100" height="100">
</object>
<script>
var obj = document.querySelector("object");
// Very important step! Before calling
getSVGDocument, we must register
// a callback to be fired once the SVG
document is loaded.
obj.onload = function(){
init(obj.getSVGDocument());
};
function init(svg) {
var circles =
svg.getElementsByTagName("circle");
// Register click handler on all circles
for (var i = 0, len = circles.length; i <
len; i++) {
circles[i].addEventListener("click",
doOnCircleClick);
}
// When a circle element is clicked, it
adds a CSS class "blue"
// to itself.
function doOnCircleClick(event) {
this.classList.add("blue");
}
Search WWH ::




Custom Search