Search code examples
jqueryjquery-svg

My second svg image wont show up using Keith Woods JQuery svg plugin


I can't get two different svg images to load on my page using Keith Woods JQuery svg plugin. Is this possible to do? How?

The following code prints out my first svg image as it should but the second isn't visible and shows up as "<svg version="1.1" width="1647" height="760"/>" in Firebug Lite without content. (wrong sizes even)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="JQuery/jquery-1.7.2.min.js"></script>
<script src="js/jquery.svg.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    function onLoad(svg, error){
    }

    $(function(){
        $('#staticRegion').svg({});

        var svg = $('#staticRegion').svg('get');
        svg.load('svg/sverige.svg', {
            addTo: false,
            changeSize: false,
            onLoad: onLoad
        });
    });

    $(function(){
        $('#staticRegion2').svg({});

        var svg = $('#staticRegion2').svg('get');
        svg.load('svg/skane.svg', {
            addTo: false,
            changeSize: false,
            onLoad: onLoad
        });
    });
});
</script>

</head>

<body>
<div id="staticRegion"></div>
<div id="staticRegion2"></div>
</body>
</html>

Remade the post to make it nice, cozy and clean. =)


Solution

  • Got it to work now. The code were correct apart from a few barely noticable faults in the svg file. For example one too many '.