我已经在illustrator中制作了SVG，并找到了一些可以对其进行动画处理的javascript，只是想在drawSVG完成后将其填充为“黑色”，所以我尝试在末尾添加path.style.fill = 'black';功能，但没有用。
var drawSVG = function() {
var paths = document.querySelectorAll('path');
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 10s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
}
}
drawSVG();
/* From Modernizr */
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
var transitionDone = false;
transitionEvent && document.body.addEventListener(transitionEvent, function() {
transitionDone = true;
document.body.className = "pointer";
});
document.body.onclick = function() {
if (transitionDone) {
drawSVG();
transitionDone = false;
document.body.className = "";
}
};svg {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
max-width: 500px;
max-height: 500px;
color
}
.pointer {
cursor: default;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 286"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>paris</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M13,301V247h1v-5s3,1,3,3a2,2,0,0,0,2,2s1,0,1,2v16h5V243a3.62,3.62,0,0,1-2-1,3.77,3.77,0,0,1-1-3h3V226l-2-3h2v-2l-3-3h3v-6H22l3-2v-2h2v2h5v-2h3v2h4v-2h3v2h4v-2h3v2h5v-2h3v2h4v-2h3v2h4v-2h3v2l3,2H71v6h3l-3,3v2h2l-2,3v13h3c0,.14.07,2.56-1.64,3.59A3.13,3.13,0,0,1,71,243v11l2-2h1v-6l5-4s3,2,5,0v-3h2v-1H85v-4h1a10.5,10.5,0,0,1,8-11v-8h0c-.23-1.07,1-2,1-2l0,0,0,0v0a2.89,2.89,0,0,1,.63.76A3,3,0,0,1,96,215v8a7.74,7.74,0,0,1,2,1,8.35,8.35,0,0,1,3,4s0-5,3-5v-4h-1v-4h1a22.06,22.06,0,0,1,2-9,20.1,20.1,0,0,1,2-3,7.82,7.82,0,0,1,2-2,18.59,18.59,0,0,1,2-1v-9s0-3,2-3v-5h1v5s2,0,2,3v9s7,2,8,14v1h1v4h-1v4a4.33,4.33,0,0,1,2,4c1-2.48,2.1-3.52,3-4l2-1v-8l1-1v0a1.87,1.87,0,0,1,1,2c-.11.92-.1,3.37,0,7a10,10,0,0,1,2,1,12,12,0,0,1,3,3,13.53,13.53,0,0,1,2,8h1v4h-1v3h1v-2h1v3h2v23h2V214l6-4,1-1v-6l4-4,4,1v11l14,3v2h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v3h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h7v-4h2l20-36V210h7s9-20,9-42l-1-1v-8l3.5-.5c2.77-29.09,4.56-58.8,5-91q.21-15.75,0-31c-.17-.15-1.79-.64-2-1A3.45,3.45,0,0,1,226,34a2,2,0,0,1,2-2c.23,0,.58,0,1,0,.73,0,.86.07,1,0,.3-.15.48-.81,0-3a16.22,16.22,0,0,1-1-3,12.13,12.13,0,0,1,0-6,5.7,5.7,0,0,1,4-4h2a5.7,5.7,0,0,1,4,4,14.59,14.59,0,0,1,0,6c-.34,1.08-.69,1-1,2a7.09,7.09,0,0,0,0,4h1a1.64,1.64,0,0,1,1,0,1.77,1.77,0,0,1,1,1,2.37,2.37,0,0,1,0,2,1.88,1.88,0,0,1-1,1l-.54.52L240,67c.66,15.73.91,35.24,1.5,44.5,0,0-.25,4.85,3,47,.67,0,2.83.5,3.5.5v8l-1,1v1c.48,13.23,2.83,22.16,5,28,0,0,.16.44,5,13h8v15h-1v1l19,35h3v4h4V236l7-6v25l3,1v9h2V254l4-4v2h1V229h-2v-1l1-2h2V208h-1v-1h1v-4h1v-2h1v-3h1v-3s0-3,2-3,2,3,2,3v3h10v3h1v2h1v3h1v2h-1v18h6V213s0-3,1-3,1,3,1,3v13h7V208h-1v-2h1v-3h1v-2h1v-3h10v-3s0-3,2-3,2,3,2,3v3h1v3h1v2h1v3h1v1h-1v19h3v-7l9-6v87Z" transform="translate(-12.5 -15.5)"/></g><g id="Layer_3" data-name="Layer 3"><path class="cls-1" d="M223.5,210.5h22s-7-20-7-32h-9A79.07,79.07,0,0,1,223.5,210.5Z" transform="translate(-12.5 -15.5)"/><path class="cls-1" d="M203.5,265.5v-1c0-1,2-28,31-28s30,29,30,29h-11v-11l-3-1-4,3v9h-6v-5h-3v-12l-4-6h-4v23h-5v-7l-3-2v-9l-4,2v16Z" transform="translate(-12.5 -15.5)"/></g></svg>
答案 0 :(得分：0)
如果要在动画的最后填充所有路径，可以通过setTimeout添加延迟的函数调用，并在其中设置路径的填充样式。延迟必须与动画长度匹配。在您的情况下，动画为10秒，因此函数调用的延迟必须为10000（毫秒）。
let drawSVG = function() {
let paths = document.querySelectorAll('path');
for (let i = 0; i < paths.length; i++) {
let path = paths[i];
let length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 10s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
setTimeout(function() {
path.style.fill = '#000';
}, 10000);
}
}
drawSVG();
/* From Modernizr */
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
var transitionDone = false;
transitionEvent && document.body.addEventListener(transitionEvent, function() {
transitionDone = true;
document.body.className = "pointer";
});
document.body.onclick = function() {
if (transitionDone) {
drawSVG();
transitionDone = false;
document.body.className = "";
}
};svg {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
max-width: 500px;
max-height: 500px;
color
}
.pointer {
cursor: default;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 286"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>paris</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M13,301V247h1v-5s3,1,3,3a2,2,0,0,0,2,2s1,0,1,2v16h5V243a3.62,3.62,0,0,1-2-1,3.77,3.77,0,0,1-1-3h3V226l-2-3h2v-2l-3-3h3v-6H22l3-2v-2h2v2h5v-2h3v2h4v-2h3v2h4v-2h3v2h5v-2h3v2h4v-2h3v2h4v-2h3v2l3,2H71v6h3l-3,3v2h2l-2,3v13h3c0,.14.07,2.56-1.64,3.59A3.13,3.13,0,0,1,71,243v11l2-2h1v-6l5-4s3,2,5,0v-3h2v-1H85v-4h1a10.5,10.5,0,0,1,8-11v-8h0c-.23-1.07,1-2,1-2l0,0,0,0v0a2.89,2.89,0,0,1,.63.76A3,3,0,0,1,96,215v8a7.74,7.74,0,0,1,2,1,8.35,8.35,0,0,1,3,4s0-5,3-5v-4h-1v-4h1a22.06,22.06,0,0,1,2-9,20.1,20.1,0,0,1,2-3,7.82,7.82,0,0,1,2-2,18.59,18.59,0,0,1,2-1v-9s0-3,2-3v-5h1v5s2,0,2,3v9s7,2,8,14v1h1v4h-1v4a4.33,4.33,0,0,1,2,4c1-2.48,2.1-3.52,3-4l2-1v-8l1-1v0a1.87,1.87,0,0,1,1,2c-.11.92-.1,3.37,0,7a10,10,0,0,1,2,1,12,12,0,0,1,3,3,13.53,13.53,0,0,1,2,8h1v4h-1v3h1v-2h1v3h2v23h2V214l6-4,1-1v-6l4-4,4,1v11l14,3v2h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v3h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h7v-4h2l20-36V210h7s9-20,9-42l-1-1v-8l3.5-.5c2.77-29.09,4.56-58.8,5-91q.21-15.75,0-31c-.17-.15-1.79-.64-2-1A3.45,3.45,0,0,1,226,34a2,2,0,0,1,2-2c.23,0,.58,0,1,0,.73,0,.86.07,1,0,.3-.15.48-.81,0-3a16.22,16.22,0,0,1-1-3,12.13,12.13,0,0,1,0-6,5.7,5.7,0,0,1,4-4h2a5.7,5.7,0,0,1,4,4,14.59,14.59,0,0,1,0,6c-.34,1.08-.69,1-1,2a7.09,7.09,0,0,0,0,4h1a1.64,1.64,0,0,1,1,0,1.77,1.77,0,0,1,1,1,2.37,2.37,0,0,1,0,2,1.88,1.88,0,0,1-1,1l-.54.52L240,67c.66,15.73.91,35.24,1.5,44.5,0,0-.25,4.85,3,47,.67,0,2.83.5,3.5.5v8l-1,1v1c.48,13.23,2.83,22.16,5,28,0,0,.16.44,5,13h8v15h-1v1l19,35h3v4h4V236l7-6v25l3,1v9h2V254l4-4v2h1V229h-2v-1l1-2h2V208h-1v-1h1v-4h1v-2h1v-3h1v-3s0-3,2-3,2,3,2,3v3h10v3h1v2h1v3h1v2h-1v18h6V213s0-3,1-3,1,3,1,3v13h7V208h-1v-2h1v-3h1v-2h1v-3h10v-3s0-3,2-3,2,3,2,3v3h1v3h1v2h1v3h1v1h-1v19h3v-7l9-6v87Z" transform="translate(-12.5 -15.5)"/></g><g id="Layer_3" data-name="Layer 3"><path class="cls-1" d="M223.5,210.5h22s-7-20-7-32h-9A79.07,79.07,0,0,1,223.5,210.5Z" transform="translate(-12.5 -15.5)"/><path class="cls-1" d="M203.5,265.5v-1c0-1,2-28,31-28s30,29,30,29h-11v-11l-3-1-4,3v9h-6v-5h-3v-12l-4-6h-4v23h-5v-7l-3-2v-9l-4,2v16Z" transform="translate(-12.5 -15.5)"/></g></svg>