Странная проблема с масштабированием/перемещением плагина jQuery-SVG

Я использую плагин jQuery SVG из http://keith-wood.name/svg.html. , и есть странная проблема.

Пакет плагинов очень хорош, позволяя использовать простой код. Однако, когда я реализую функцию масштабирования и перемещения, код работает только на одном ПК и не работает на других ПК или смартфонах.

Я хотел бы найти основную причину и устранить проблему, чтобы зум работал на всех платформах.

Подходит для: одного ПК XP с IE8, с надстройкой Adobe SVG Viewer.

Не работает: ПК XP с Firefox; Win 7 с IE8, Firefox, Chrome; Мобильная опера

Соответствующий код приведен ниже.

<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>

Любая помощь приветствуется.


svg jquery-svg
person user1625181    schedule 25.08.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я знаю, что это очень поздно, но я только что нашел ваш пост, исследуя примерно ту же проблему.

В любом случае, ваша проблема может быть связана с тем фактом, что jQuery делает .toLowerCase() для имен атрибутов. Обычно это нормально, но SVG, кажется, является единственным исключением в некоторых браузерах.

Вместо

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

пытаться

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

тогда

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

чтобы установить его, когда вы закончите.

person Justin Ross    schedule 26.10.2012