jQuery-SVG 插件的奇怪缩放/移动问题答案

【问题标题】：Strange Zoom/Move Issue of jQuery-SVG pluginjQuery-SVG 插件的奇怪缩放/移动问题
【发布时间】：2012-10-27 05:14:52
【问题描述】：

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

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

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

适用于：一台装有 IE8 的 XP 电脑，带有 Adobe SVG Viewer 插件

无效：带火狐的 XP 电脑； 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

【解决方案1】：

我知道这太晚了，但我只是在研究大致相同的问题时发现了你的帖子。

无论如何，您的问题可能与 jQuery 对属性名称执行 .toLowerCase() 的事实有关。通常，这很好，但 SVG 似乎是某些浏览器中的一个例外。

代替

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

试试

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

然后

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

完成后设置它。

【讨论】：