DOM 中的 Svg 无法在旧版浏览器（IE9、IE10、Safari 6）上缩放

Question

我正在使用 snap.svg（来自 snapsvg.io 的 jQuery 插件）将 .svg 图像加载到我的网站中，这只会在图像中加载我的备用位置并使在我的 html.

中，某些元素可以设置动画而不会丢失结构

我面临的问题是图像无法在旧版浏览器（例如 IE9、IE10、Safari 6）上缩放

svg 属性：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2100 1174.2" style="enable-background:new 0 0 2100 1174.2;" xml:space="preserve">

在 BrowserStack 中使用 firebug 时，我可以看到外部 svg 元素的宽度为 100%，比例丢失。

这是我尝试过的一小部分（有些绝望和荒谬）：

删除纵横比
删除视图框
增加宽度（100%）
添加宽度 (100%) 和高度（自动）
重命名图层id（同一页面有多个svg图片）

值得注意：

所有路径样式都是内联的（从 Illustrator 导出）
所有加载为 <img> 的 svg 都有效
this question 中的示例在旧版浏览器中确实有效（我将此示例作为不需要 padding-hacking 的证据）

提前致谢

Answer 1

已找到解决方案！

在旧版浏览器中（存在这些问题），需要声明高度和宽度。没有其中之一会导致默认设置（例如 IE9 150px 高度）

我通过写一些 JavaScript (jQuery):

解决了这个问题

function setSvgHeight() {
    $('svg').each(function() {
        var viewBox = $(this).attr('viewBox').split(" ");
        $(this).css("height", (( $(this).parent().width() / viewBox[2] ) * viewBox[3] ));
    });
}

此函数遍历所有 <svg> 元素，请求 viewBox 并将 svg 的高度设置为计算出的高度（记住比率）。 之所以有效，是因为宽度已经在 css 中定义。

$(window).on("resize", function() {
    setSvgHeight();
});

$(window).on("load", function() {
    setSvgHeight();
});

上面显示的触发器确保纵横比在调整大小时保持不变。并给出设置高度的初始触发器。

var interval = setInterval(function(){
    if($('.source').length == 0){
        setSvgHeight();
        clearInterval(interval);
    }
}, 50);

我写了上面显示的间隔来计算我的后备图像，我使用了一个插件来用内联 SVG 替换这些后备图像（具有 class "fallback"）。一旦后备图像数量达到0，则意味着所有图像都已加载并触发设置高度的功能。

DOM 中的 Svg 无法在旧版浏览器（IE9、IE10、Safari 6）上缩放

Svg in DOM does not scale on older browsers (IE9, IE10, Safari 6)

svg

snap.svg