Animate dashed svg on background image

Question

I have a task that looks like this:

I need to animate(draw) this dashed line on background image ( or just <img /> - doesn't matter). I used to do such an animation using SVG path, stroke-dasharray and stroke-dashoffset by creating *2 <path /> - First is solid and Second is dashed *.

But in this case second path need to have same color as background which in my case obviously is not gonna happen because of image.

I made jsfiddle to demonstrate what I have at the moment.

My question though: Is it even possible to achieve this type of animation above some image?

Answer 1

I've continued to think about this, and finally the solution came to me: simply use a mask, not a clipPath:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="575" height="115"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="startAnimation()">
<defs>
  <path id="dashed" d="m14,112c21,-11 35,-14 35,-14c0,0 14,-1 14,-1c0,0 21,0 21,0c0,0 22,0 23,0c1,0 29,5 29,5c0,0 17,6 17,6c0,0 16,-2 17,-2c1,0 14,-1 14,-1c0,0 17,-3 17,-3c0,0 13,-3 13,-3c0,0 15,-9 15,-9c0,0 25,-10 25,-10c0,0 24,-2 24,-2c0,0 16,-3 17,-3c1,0 21,-1 21,-1c0,0 18,0 19,0c1,0 21,0 21,0c0,0 21,0 21,0c0,0 21,-1 21,-1c0,0 13,-2 14,-2c1,0 14,-8 15,-8c1,0 17,-7 17,-7c0,0 6,-1 7,-2c1,-1 11,-3 11,-3c0,0 21,-2 22,-2c1,0 20,-5 22,-6c2,-1 11,-8 12,-9c1,-1 17,-13 18,-13c1,0 16,-17 17,-18" />
  <mask id="mask">
    <use xlink:href="#dashed" stroke-width="6" stroke="white" stroke-dasharray="1000,0" fill="none">
      <animate id="reveal" attributeType="CSS" attributeName="stroke-dasharray" 
         from="0,1000" to="1000,0" begin="indefinite" dur="5s" fill="freeze" />
    </use>
  </mask>
  <script type="application/ecmascript"><![CDATA[
function startAnimation() {
    var len = document.getElementById('dashed').getTotalLength();
    var animate = document.getElementById('reveal');
    animate.setAttribute('from', '0,' + len);
    animate.setAttribute('to', len + ',0');
    animate.beginElement();
}
  ]]></script>
</defs>
  <use xlink:href="#dashed" stroke-width="4" stroke-dasharray="10" stroke="#E8511B" fill="none" mask="url(#mask)"/>
</svg>

As another optimization, and inspired by this d3 Stroke Dash Interpolation, I've computed the path length and animated both values of the stroke-dasharray attribute, thus maintaning a constant length of dash + gap.

Answer 2

For a curved path this is tricky. As long as the line has a dominant direction, you can overlay the path with a cliping rectangle, a bit like opening a curtain on a previously hidden image:

<svg width="575" height="115"  xmlns="http://www.w3.org/2000/svg">
<defs>
  <clipPath id="curtain">
    <rect height="115" width="0">
      <animate attributeType="XML" attributeName="width" 
         from="0" to="575" dur="10s" fill="freeze" />
    </rect>
  </clipPath>
</defs>
<path id="dashed" d="m14,112c21,-11 35,-14 35,-14c0,0 14,-1 14,-1c0,0 21,0 21,0c0,0 22,0 23,0c1,0 29,5 29,5c0,0 17,6 17,6c0,0 16,-2 17,-2c1,0 14,-1 14,-1c0,0 17,-3 17,-3c0,0 13,-3 13,-3c0,0 15,-9 15,-9c0,0 25,-10 25,-10c0,0 24,-2 24,-2c0,0 16,-3 17,-3c1,0 21,-1 21,-1c0,0 18,0 19,0c1,0 21,0 21,0c0,0 21,0 21,0c0,0 21,-1 21,-1c0,0 13,-2 14,-2c1,0 14,-8 15,-8c1,0 17,-7 17,-7c0,0 6,-1 7,-2c1,-1 11,-3 11,-3c0,0 21,-2 22,-2c1,0 20,-5 22,-6c2,-1 11,-8 12,-9c1,-1 17,-13 18,-13c1,0 16,-17 17,-18" stroke-width="4" stroke-dasharray="10" stroke="#E8511B" fill="none" clip-path="url(#curtain)"/>
</svg>

The same could be achieved on the HTML side with css:

#content {
  width: 700px;
  height: 300px;
  position: relative;
}
#curtain {
    position: relative;
    width: 0%;
    height: 100%;
    overflow: hidden;
    animation-name: draw;
    animation-duration: 10s;
    animation-fill-mode: forwards; // Stay on the last frame
    animation-iteration-count: 1; // Run only once
    animation-timing-function: linear;
}
.img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 1;
}
svg {
    position: absolute;
    top: 20px;
    left: 0;
}
#dashed {
    stroke-dasharray: 10;
    stroke: #E8511B;
    stroke-width: 4;
    fill: none;
}

@keyframes draw {
    to {
        width: 100%;
    }
}

<div id="content">
  <div id="curtain">
    <svg width="575" height="115"  xmlns="http://www.w3.org/2000/svg">
      <path id="dashed" d="m14,112c21,-11 35,-14 35,-14c0,0 14,-1 14,-1c0,0 21,0 21,0c0,0 22,0 23,0c1,0 29,5 29,5c0,0 17,6 17,6c0,0 16,-2 17,-2c1,0 14,-1 14,-1c0,0 17,-3 17,-3c0,0 13,-3 13,-3c0,0 15,-9 15,-9c0,0 25,-10 25,-10c0,0 24,-2 24,-2c0,0 16,-3 17,-3c1,0 21,-1 21,-1c0,0 18,0 19,0c1,0 21,0 21,0c0,0 21,0 21,0c0,0 21,-1 21,-1c0,0 13,-2 14,-2c1,0 14,-8 15,-8c1,0 17,-7 17,-7c0,0 6,-1 7,-2c1,-1 11,-3 11,-3c0,0 21,-2 22,-2c1,0 20,-5 22,-6c2,-1 11,-8 12,-9c1,-1 17,-13 18,-13c1,0 16,-17 17,-18" />
    </svg>
  </div>
  <img src="" class="img">
</div>

Ovviously, this does not result in a steady pace "along the path". I am not aware how to achieve this with a curved path (exept some very special cases where the "leading" point can be expressed in a mathematically simple function of time).