![](/img/trans.png)
[英]What purpose does this serve? IIFE assignment to var in Snap.svg.js
[英]External SVG icons do not load properly in Internet Explorer 11 with snap.svg.js plugin
我正在尝试帮助设计者朋友在其他人开发的网站上使用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 -->
然后,SVG图标通过类“ svg-container”和它们自己的唯一ID通过jquery附加到空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标记。 我GOOGLE了四周,我发现这里的其他人也面临同样的问题与此插件。 我尝试用$('#mars-solutions')。load“更改变量中的” Snap.load“,因为该线程上有人建议,图标确实出现在IE11中,但随后SVG的填充颜色在悬停时停止更改。最初应该是浅灰色并在悬停时更改为原始颜色,但是现在它们都根据原始svg文件中设置的fill属性着色了,有没有办法解决此问题,以便SVG在IE11中正确加载并保持悬停填充颜色动画在同一时间?
我想到了。 代码或插件本身没有问题。 问题在于svg文件缺少doctype声明。 我在svg文件中添加了<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
它们在IE11中正确加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.