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％，比率丢失。

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

删除宽高比
删除viewBox
添加宽度（100％）
添加宽度（100％）和高度（自动）
重命名图层ID（同一页面上有多个svg图像）

值得注意的：

所有路径样式都是内联的（来自Illustrator导出）
以<img>加载的所有svgs都可以正常工作
来自this question的示例在较旧的浏览器中有效（我将此示例作为不需要填充黑客的证据）

提前谢谢

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。一旦后备图像的数量达到0，这意味着所有都被加载并且触发了设置高度的功能。

DOM中的Svg无法在旧版浏览器（IE9，IE10，Safari 6）上扩展

1 个答案: