0

我正在使用来自http://keith-wood.name/svg.html的 jQuery SVG 插件，并且有一个奇怪的问题。

插件包非常好，启用简单的代码。但是，当我实现缩放和移动功能时，该代码仅适用于一台 PC，不适用于其他 PC 或智能手机。

我想找到根本原因并解决问题——以便缩放适用于所有平台。

适用于：一台带有 IE8 的 XP PC，带有 Adob​​e SVG Viewer 插件

不适用：带 Firefox 的 XP PC；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>

任何帮助表示赞赏。

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