title: How to make the stroke of an SVG path take the background image?
body: <p>I am using animation on SVG elements (only paths) (Just by toggling the visibility property of paths very frequently with JavaScript). The SVG has a background image. Some of the paths that are displayed must have the background image on the stroke (to appear as if they are erasing paths). I use the masking capability of SVG to do this as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var t = 0;
  var displayDictionary = {};
  
  function fillDisplayDictionary()
  {
    var paths = document.querySelectorAll("svg path");
   
    
    for(var index=0; index &lt; paths.length; index++)
    {
      var path = paths[index];
      
      var pathDisplayTime = parseInt(path.getAttribute("data-t"));
      
      displayDictionary[pathDisplayTime] = path;
    }
    
  }
  
  function displayNextElement()
  {
    displayDictionary[t].style.visibility = "visible";
    
    t++;
    
    if(t == 5)
      clearInterval(interval);
  }
  
  
  
  fillDisplayDictionary();
  interval = setInterval(displayNextElement, 40);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg path
  {
    visibility: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;svg height="400" width="450"&gt;
  
  &lt;!-- this is the background image --&gt;
  &lt;image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"&gt;&lt;/image&gt;
    
    &lt;!-- these are ordinary paths --&gt;
   &lt;path data-t="0" d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" /&gt;
    &lt;path data-t="1" d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" /&gt;
    &lt;path data-t="2" d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" /&gt;
    &lt;path data-t="3" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" /&gt;
    
       
    &lt;mask id="mask"&gt;
      &lt;!-- this is the erasing path --&gt;
      &lt;path data-t="4" d="M 0 0 L 400 450" stroke="white" stroke-width="20"  /&gt;
    &lt;/mask&gt;  
    
    &lt;!-- this is an image identical to the background image, and it is masked by the above path--&gt;
    &lt;image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450" mask="url(#mask)"&gt;&lt;/image&gt;
    
  &lt;/svg&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There are too many paths with or without background image on the stroke. This works well in Chrome. However, in FireFox, the animation process becomes very slow while displaying an erasing path (i.e a path with the background image on the stroke). Is there any other way to display an erasing path to which Firefox responds well.</p>