Question

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

页面上有一个推荐部分：

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

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

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'
    });
})

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

Answer 1

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

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

1 个答案: