使用 snap.svg.js 插件在 Internet Explorer 11 中无法正确加载外部 SVG 图标答案

【问题标题】：External SVG icons do not load properly in Internet Explorer 11 with snap.svg.js plugin使用 snap.svg.js 插件在 Internet Explorer 11 中无法正确加载外部 SVG 图标
【发布时间】：2016-10-25 02:10:17
【问题描述】：

我正在尝试帮助一位设计师朋友在其他人开发的网站上解决 snap.svg.js 插件和 Internet Explorer 11 的问题，我需要一些帮助，因为我不擅长 javascript 和 jquery。显然外部 svg 图标没有在 IE11 中正确加载。

页面上有一个推荐部分：

<div class="fw-gray hp-testimonials">
  <div class="container">
    <div class="col-md-3 col-sm-3 center">
      <div id="matic-tec" class="svg-container"></div>
      <p>Quisque felis odio, dictum id tellus posuere, fringilla bibendum ligula.</p>
    </div>
    <div class="col-md-3 col-sm-3 center">
      <div id="bechtle" class="svg-container"></div>
      <p>Quisque felis odio, dictum id tellus posuere, fringilla bibendum ligula.</p>
    </div>
    <div class="col-md-3 col-sm-3 center">
      <div id="mars-solutions" class="svg-container"></div>
      <p>Quisque felis odio, dictum id tellus posuere, fringilla bibendum ligula.</p>
    </div>
    <div class="col-md-3 col-sm-3 center">
      <div id="fkonline" class="svg-container"></div>
      <p>Quisque felis odio, dictum id tellus posuere, fringilla bibendum ligula.</p>
    </div>
  </div> <!-- container -->
</div> <!-- fw-gray -->

然后通过 jquery 将 SVG 图标附加到具有“svg-container”类和它们自己的唯一 ID 的空 div。

var msBlackText, msRedText;
var bGreenBack, bWhiteText;
var mColor;
var fkBlue, fkYellow;
var animationSpeed = 100;
var marsSolutionContainer = Snap('#mars-solutions');
var marsSolutionSVG = Snap.load("/img/svg/logo-mars-solutions.svg", function(f) {
    msBlackText = f.selectAll('#marssolutions-svg-blacktext path');
    msRedText = f.selectAll('#marssolutions-svg-redtext path')
    msBlackText.attr({fill: 'rgba(102,102,102,0.5)'});
    msRedText.attr({fill: 'rgba(102,102,102,0.5)'});
    marsSolutionContainer.append(f);
});
var bechtleContainer = Snap('#bechtle');
var bechtleSVG = Snap.load("/img/svg/logo-bechtle.svg", function(f) {
    bGreenBack = f.selectAll(".greenColor");
    bWhiteText = f.selectAll(".whiteText");
    bechtleOff();
    bechtleContainer.append(f);
});
var maticTecContainer = Snap('#matic-tec');
var maticTecSVG = Snap.load("/img/svg/logo-matic-tec.svg", function(f) {
    mColor = f.selectAll("path");
    mtecOff();
    maticTecContainer.append(f);
});
var fkOnlineContainer = Snap('#fkonline');
var fkOnlineSVG = Snap.load("/img/svg/logo-fkonline.svg", function(f) {
    fkblue = f.selectAll('#blue path, #blue polygon');
    fkYellow = f.selectAll('#yellow path');
    fkoOff();
    fkOnlineContainer.append(f);
});


// Hover Hnadler
// Testimonials
$('.hp-testimonials .col-md-3').hover(
        function() {
                $(this).find('p').css('color', 'rgba(102,102,102,1)');
                $(this).find('a').css('color', 'rgba(102,102,102,1)');
        var company = $(this).find(".svg-container").attr('id');
        switch(company) {
            case "matic-tec":
                mtecOn();
                break;
            case "bechtle":
                bechtleOn();
                break;
            case "mars-solutions":
                marsOn();
                break;
            case "fkonline":
                fkoOn();
                break;
        }
        },
        function() {
                $(this).find('p').css('color', 'rgba(102,102,102,0.5)');
                $(this).find('a').css('color', 'rgba(102,102,102,0.5)');
                grayOn();
        }
)

function mtecOn() {
    mColor.animate({fill: '#046296'}, animationSpeed);
}
function mtecOff() {
    mColor.animate({fill: 'rgba(180,180,180,0.5)'}, animationSpeed);
}
function bechtleOn() {
    bGreenBack.animate({fill: '#008C58'}, animationSpeed);
        bWhiteText.animate({fill: '#fff'}, animationSpeed);
}
function bechtleOff () {
    bGreenBack.animate({fill: 'rgba(180,180,180,0.5)'}, animationSpeed);
        bWhiteText.animate({fill: '#f6f6f6'}, animationSpeed);
}
function marsOn() {
    msBlackText.animate({fill: '#373F43'}, animationSpeed);
        msRedText.animate({fill: '#A50931'}, animationSpeed);
}
function marsOff() {
    msBlackText.animate({fill: 'rgba(180,180,180,0.5)'}, animationSpeed);
        msRedText.animate({fill: 'rgba(180,180,180,0.5)'}, animationSpeed);
}
function fkoOn() {
    fkblue.animate({fill: '#005CA8'}, animationSpeed);
        fkYellow.animate({fill: '#FFCA00'}, animationSpeed);
}
function fkoOff() {
    fkblue.animate({fill: 'rgba(180,180,180,0.5)'}, animationSpeed);
        fkYellow.animate({fill: '#f6f6f6'}, animationSpeed);
}
function grayOn() {
        mtecOff();
        bechtleOff();
        marsOff();
        fkoOff();
}

$(document).ready(function() {
    $('.svg-container').animate({
        'opacity': '1'
    });
})

SVG 图标在除 IE11 及以下的所有主流浏览器中都能正常加载。在 IE11 中，仅加载空的 svg 标记。我四处搜索，发现here 其他人也面临与此插件相同的问题。我尝试使用 $('#mars-solutions').load" 更改变量中的“Snap.load”，因为该线程上的某人建议并且图标确实出现在 IE11 中，但随后 SVG 的填充颜色在悬停时停止变化。SVG 是最初应该是浅灰色并在悬停时更改为原始颜色，但现在它们都根据原始 svg 文件中设置的填充属性进行着色。有没有办法解决这个问题，以便 SVG 在 IE11 中正确加载并同时保持悬停填充颜色动画？

【问题讨论】：

标签： javascript jquery html svg

【解决方案1】：

我想通了。代码或插件本身没有问题。问题是 svg 文件缺少 doctype 声明。我在 svg 文件中添加了<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">，现在它们可以在 IE11 中正确加载。

【讨论】：