Strange Zoom/Move Issue of jQuery-SVG plugin

Question

I am using a jQuery SVG plugin from http://keith-wood.name/svg.html, and have a strange issue.

The plugin package is very good, enabling simple code. However, when I implement the zoom and move function, the code only works for one PC, and does not work under other PCs or smartphones.

I would like to find the root cause and fix the problem -- so that the zoom is functioning for all platforms.

Works for: one XP PC with IE8, with Adobe SVG Viewer add-on

Not works: XP PC with Firefox; Win 7 with IE8, Firefox, Chrome; Mobile Opera

The related code is below.

<style type="text/css">
@import "jquery.svg.css";
#svgbasics { width: 800px; height: 600px; border: 1px solid #484; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svgdom.js"></script>

<script type="text/javascript">
$(function() {
    $('#svgbasics').svg({loadURL: 'Test.svg'});


    $('#ZoomIn').click(ZoomIn);
    $('#ZoomOut').click(ZoomOut);

});

function ZoomOut() {

        var svg = $('#svgbasics').svg('get');

        var viewBoxSize = $(svg.root()).attr('viewBox');
        $('#message').html(viewBoxSize);
        var viewBoxSizeArray = viewBoxSize.split(" ");

            X = Number(viewBoxSizeArray[0]);
        Y = Number(viewBoxSizeArray[1]);
        Width = Number(viewBoxSizeArray[2]);
        Height = Number(viewBoxSizeArray[3]);

        Width = Width/0.9;
        Height = Height/0.9;
        var string = X + " " + Y + " " + Width + " " + Height;
        $('#message2').html(string);
        svg.change(svg.root(), {viewBox: string});

}



</script>

Any help is appreciated.

score 1 · Answer 1 · answered Oct 26 '12 at 21:14

I know this is super-late, but I just found your post while researching roughly the same issue.

Anyway, your problem might be related to the fact that jQuery does a .toLowerCase() to attribute names. Normally, this is fine, but SVG seems to be the one exception in some browsers.

Instead of

$(svg.root()).attr('viewBox');

try

svg.root().getAttribute('viewBox');

then

svg.root().setAttribute('viewBox', value);

to set it when you're done.

Strange Zoom/Move Issue of jQuery-SVG plugin

1 Answers1