动画在背景图象的破折号svg

Question

我的任务看起来像这样：

我需要在背景图像上设置（绘制）这条虚线（或只是<img /> - 并不重要）。我以前通过创建 * 2 path使用SVG stroke-dasharray，stroke-dashoffset和<path />进行此类动画 - 首先是实体，第二是虚线* 。

但在这种情况下，第二个path需要与背景颜色相同，在我的情况下显然不会因为图像而发生。

我让jsfiddle展示了我现在拥有的东西。

我的问题是：甚至可以在某些图像上方实现这种类型的动画吗？

Answer 1

我一直在考虑这个，最后解决方案来找我：只需使用一个面具，而不是一个clipPath：

＆＃13;

＆＃13;

<?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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

对于弯曲的路径，这很棘手。只要线条具有主导方向，您就可以使用剪切矩形覆盖路径，有点像在先前隐藏的图像上打开窗帘：

<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>

使用css可以在HTML端实现同样的目的：

#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>

显然，这并没有“沿着这条道路”稳步前进。我不知道如何用弯曲的路径来实现这一点（除了一些非常特殊的情况，其中“前导”点可以用数学上简单的时间函数表示。）