I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance?
View the demo on JSFiddle here - http://jsfiddle.net/hNrwE/. (Since I'm unsure how to upload the SVG directly to Fiddle, I've included the SVG code here as well)
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#stage").load('flowchart3.svg',function(response){
$(this).addClass("svgLoaded");
if(!response){
// Error loading SVG!
// Make sure you are running this on a web server or localhost!
}
});
});
</script>
<style>
<!-- CSS styles go here -->
</style>
<div class="cbody-full">
<div class="container">
<div id="benefits">
<div class="info">
<div id="stage"> <!-- Fallback Text Content can go here --> </div>
</div>
</div>
</div>
</div>
XML/SVG Code:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="timeline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<!-- SVG content goes here -->
</svg>