当笔画宽度大于1时，IE中的SVG笔画动画 [英] SVG stroke animation in IE when stroke-width is greater than 1
本文介绍了当笔画宽度大于1时，IE中的SVG笔画动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当笔划大于1px宽时，IE中的笔画路径动画有一个奇怪的问题。我正在使用以下脚本（不是由我创建的）：
I have a bizarre problem with animating stroke paths in IE when the stroke is greater than 1px wide. I'm using the following script (not created by me):
//inspired by http://product.voxmedia.com/post/68085482982/polygon-feature-design-svg-animations-for-fun-and
//If you want to add SVG to the DOM, jQuery won't do
//http://www.benknowscode.com/2012/09/using-svg-elements-with-jquery_6812.html
function SVG(tag) {
return document.createElementNS('http://www.w3.org/2000/svg', tag);
}
function replaceRectsWithPaths(parentElement) {
var rects = $(parentElement).find('rect');
$.each(rects, function() {
var rectX = $(this).attr('x');
var rectY = $(this).attr('y');
var rectX2 = parseFloat(rectX) + parseFloat($(this).attr('width'));
var rectY2 = parseFloat(rectY) + parseFloat($(this).attr('height'));
var convertedPath = 'M' + rectX + ',' + rectY + ' ' + rectX2 + ',' + rectY + ' ' + rectX2 + ',' + rectY2 + ' ' + rectX + ',' + rectY2 + ' ' + rectX + ',' + rectY;
$(SVG('path'))
.attr('d', convertedPath)
.attr('fill', $(this).attr('fill'))
.attr('stroke', $(this).attr('stroke'))
.attr('stroke-width', $(this).attr('stroke-width'))
.insertAfter(this);
});
$(rects).remove();
}
function replaceLinesWithPaths(parentElement) {
var lines = $(parentElement).find('line');
$.each(lines, function() {
var lineX1 = $(this).attr('x1');
var lineY1 = $(this).attr('y1');
var lineX2 = $(this).attr('x2');
var lineY2 = $(this).attr('y2');
var convertedPath = 'M' + lineX1 + ',' + lineY1 + ' ' + lineX2 + ',' + lineY2;
$(SVG('path'))
.attr('d', convertedPath)
.attr('fill', $(this).attr('fill'))
.attr('stroke', $(this).attr('stroke'))
.attr('stroke-width', $(this).attr('stroke-width'))
.insertAfter(this);
});
$(lines).remove();
}
function replaceCirclesWithPaths(parentElement) {
var circles = $(parentElement).find('circle');
$.each(circles, function() {
var cX = $(this).attr('cx');
var cY = $(this).attr('cy');
var r = $(this).attr('r');
var r2 = parseFloat(r * 2);
var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-r) + ', 0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + r2 + ',0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + (-r2) + ',0 ';
$(SVG('path'))
.attr('d', convertedPath)
.attr('fill', $(this).attr('fill'))
.attr('stroke', $(this).attr('stroke'))
.attr('stroke-width', $(this).attr('stroke-width'))
.insertAfter(this);
});
$(circles).remove();
}
function replaceEllipsesWithPaths(parentElement) {
var ellipses = $(parentElement).find('ellipse');
$.each(ellipses, function() {
var cX = $(this).attr('cx');
var cY = $(this).attr('cy');
var rX = $(this).attr('rx');
var rY = $(this).attr('ry');
var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-rX) + ', 0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + rX*2 + ',0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + (-rX*2) + ',0 ';
$(SVG('path'))
.attr('d', convertedPath)
.attr('fill', $(this).attr('fill'))
.attr('stroke', $(this).attr('stroke'))
.attr('stroke-width', $(this).attr('stroke-width'))
.insertAfter(this);
});
$(ellipses).remove();
}
function replacePolygonsWithPaths(parentElement) {
var polygons = $(parentElement).find('polygon');
$.each(polygons, function() {
var points = $(this).attr('points');
var polyPoints = points.split(/[ ,]+/);
var endPoint = polyPoints[0] + ', ' + polyPoints[1];
$(SVG('path'))
.attr('d', 'M' + points + ' ' + endPoint)
.attr('fill', $(this).attr('fill'))
.attr('stroke', $(this).attr('stroke'))
.attr('stroke-width', $(this).attr('stroke-width'))
.insertAfter(this);
});
$(polygons).remove();
}
function replacePolylinesWithPaths(parentElement) {
var polylines = $(parentElement).find('polyline');
$.each(polylines, function() {
var points = $(this).attr('points');
$(SVG('path'))
.attr('d', 'M' + points)
.attr('fill', $(this).attr('fill'))
.attr('stroke', $(this).attr('stroke'))
.attr('stroke-width', $(this).attr('stroke-width'))
.insertAfter(this);
});
$(polylines).remove();
}
function hideSVGPaths(parentElement) {
var paths = $(parentElement).find('path');
//for each PATH..
$.each( paths, function() {
//get the total length
var totalLength = this.getTotalLength();
//set PATHs to invisible
$(this).css({
'stroke-dashoffset': totalLength,
'stroke-dasharray': totalLength + ' ' + totalLength
});
});
}
function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {
var paths = $(_parentElement).find('path');
//for each PATH..
$.each( paths, function(i) {
//get the total length
var totalLength = this.getTotalLength();
//set PATHs to invisible
$(this).css({
'stroke-dashoffset': totalLength,
'stroke-dasharray': totalLength + ' ' + totalLength
});
//animate
$(this).delay(_timeDelay*i).animate({
'stroke-dashoffset': 0
}, {
duration: Math.floor(Math.random() * _timeMax) + _timeMin
,easing: 'easeInOutQuad'
});
});
}
function replaceWithPaths(parentElement) {
replaceRectsWithPaths(parentElement);
replaceLinesWithPaths(parentElement);
replaceEllipsesWithPaths(parentElement);
replaceCirclesWithPaths(parentElement);
replacePolygonsWithPaths(parentElement);
replacePolylinesWithPaths(parentElement);
}
function startSVGAnimation(parentElement){
drawSVGPaths(parentElement, 100, 300, 200);
TweenLite.to(".svgWork", 1, {attr:{"fill-opacity":1}}).delay(1);
TweenLite.to(".svgServices", 1, {attr:{"fill-opacity":1}}).delay(1.5);
TweenLite.to(".svgCalc", 1, {attr:{"fill-opacity":1}}).delay(2);
TweenLite.to(".svgTeam", 1, {attr:{"fill-opacity":1}}).delay(1);
TweenLite.to(".svgWorkforus", 1, {attr:{"fill-opacity":1}}).delay(1.5);
}
$(function() {
//if (!Modernizr.touch) {
var animated = $('.js-animate');
replaceWithPaths(animated);
hideSVGPaths(animated);
$(document).scroll(function() {
$(animated).each(function(i) {
if( $(this).visible() ) {
startSVGAnimation(this);
animated.splice(i,1);
};
});
});
$(document).scroll();
//};
});
http://codepen.io/niorad/pen/xmfza
正如您所见，它在IE（和其他浏览器）中运行良好。在我的网站上实现它并将其应用于行程宽度大于1的SVG后，SVG无法在IE中正确绘制。示例：
http://upright.cloudlevel.me/
As you can see it works fine in IE (and other browsers). Having implemented it on my site and applied it to an SVG with a stroke-width of greater than 1, the SVG does not draw properly in IE. Example here: http://upright.cloudlevel.me/
如果我将其减少到一个基本的SVG圈而没有其他任何东西，例如
If I reduce it down to a basic SVG circle without anything else e.g.
circle fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="115.5" cy="119.5" r="55.5"
我可以增加中风-width到6之前它就会中断。
I can increase the stroke-width to 6 before it breaks.
我该怎么做才能解决/解决这个问题？在这一点上，我想出的最好的是包含一些浏览器检测以在IE中禁用动画，但这当然远非理想。
What can I do to fix / get around this issue? At this point the best I have come up with is to include some browser detection to disable animation in IE, but this of course would be far from ideal.
推荐答案
我也遇到了同样的问题，当笔画宽度大于6时我发现它呈现错误。我怀疑这是IE渲染svg的错误。
I also met the same problem, I found it render error when stroke-width greater than 6. I suspect it is IE's bug on rendering svg.
当我使用剪辑路径绘制SVG路径动画时，我必须使用以下代码。
When I drawing a SVG path animation with clip-path, I have to use the below code.
var ua = navigator.userAgent.toLowerCase();
if(/msie/.test(ua) || /rv:[\d.]+\) like gecko/.test(ua)){
e.setAttributeNS(null, 'stroke-width', '6');
} else {
e.setAttributeNS(null, 'stroke-width', '15');
}
这篇关于当笔画宽度大于1时，IE中的SVG笔画动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
