Q:

Fill SVG when line animation complete

I've made an SVG in illustrator and found some javascript that animates it, just want it to fill "black" once the drawSVG is complete, I tried adding path.style.fill = 'black'; at the end of the function but it didn't work.

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>

A:

If you want to fill all the paths at the end off the animation you can add an delayed function-call via setTimeout and set the fill-style of the path inside. The delay must match the animation-length. in your case the animation is 10seconds, so the delay for the function call must be 10000 (milliseconds).

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>

