html - 在背景图像上动画虚线 svg

Question

我有一个看起来像这样的任务:

我需要在背景图像上动画(绘制)这条虚线(或者只是 <img /> - 无关紧要)。我曾经使用 SVG 制作这样的动画 path , stroke-dasharray和 stroke-dashoffset通过创建 *2 <path /> - 第一个是实线，第二个是虚线 *。

但在本例中是第二个 path需要与背景具有相同的颜色，在我的例子中，由于图像的原因，这显然不会发生。

我做了 jsfiddle展示我目前拥有的东西。

但我的问题是:是否有可能在某些图像上方实现这种类型的动画？

Answer 1

我一直在思考这个问题，最后想到了解决方案:简单地使用 mask ，而不是 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>

作为另一个优化，并受此 d3 Stroke Dash Interpolation 启发，我已经计算了路径长度并为 stroke-dasharray 属性的两个值设置了动画，从而保持破折号 + 间隙的恒定长度。