0

http://keith-wood.name/svg.htmlのjQuerySVGプラグインを使用していますが、奇妙な問題があります。

プラグインパッケージは非常に優れており、簡単なコードが可能です。ただし、ズームと移動機能を実装すると、コードは1台のPCでのみ機能し、他のPCやスマートフォンでは機能しません。

根本的な原因を見つけて問題を修正し、すべてのプラットフォームでズームが機能するようにします。

対象：IE8を搭載した1台のXP PC、AdobeSVGViewerアドオン付き

動作しません：Firefoxを搭載したXP PC; IE8、Firefox、Chromeで7を獲得。モバイルオペラ

関連するコードは以下のとおりです。

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

どんな助けでも大歓迎です。

4

1 に答える 1

1

これが非常に遅いことは知っていますが、ほぼ同じ問題を調査しているときにあなたの投稿を見つけました.

とにかく、あなたの問題は、jQuery が属性名に .toLowerCase() を実行するという事実に関連している可能性があります。通常はこれで問題ありませんが、一部のブラウザーでは SVG だけが例外のようです。

それ以外の

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

試す

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

それから

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

完了したら設定します。

于 2012-10-26T21:14:52.680 に答える