SVG 重复跳过/抖动

Question

我制作了一个简单的 SVG，它的元素每 5 秒重复一次，但是在我查看过的每个浏览器和操作系统中，它似乎每次重复时都会短暂地跳回几个像素（一旦 5 条虚线退出框架）。这有点微妙，但如果你仔细观察，它就在那里。

代码如下，这里是一个 CodePen：http://codepen.io/MityaDSCH/pen/vOpbdb

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY st "fill:none;stroke:#000000;">]>
<svg version="1.1" id="feynman-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="700px" height="600px" viewBox="0 0 700 600" style="border: 1px solid black;top:0;right:0;bottom:0;left:0;position:absolute;margin:auto;enable-background:new 0 0 700 600;" xml:space="preserve">

  <!-- MW line -->
  <polyline style="&st;" points="0,600 200,200 300,400 400,200 500,400 700,0"/>    

  <!-- Top Dashed Line -->    
  <clipPath id="top-dashed-clip">
    <rect x="100" y="0" width="100" height="200" fill="url(#Gradient)"/>
  </clipPath>
  <line style="&st;" stroke-dasharray="22, 22" x1="100" y1="0" x2="300" y2="400" clip-path="url(#top-dashed-clip)">
    <animate attributeName="x1" from="100" to="0" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
    <animate attributeName="y1" from="0" to="-200" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
    <animate attributeName="x2" from="300" to="200" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
    <animate attributeName="y2" from="400" to="200" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
  </line>

  <!-- Bottom Dashed Line -->    
  <clipPath id="bottom-dashed-clip">
    <rect x="500" y="400" width="100" height="200"/>
  </clipPath>
  <line style="&st;" stroke-dasharray="22, 22" x1="600" y1="600" x2="400" y2="200" clip-path="url(#bottom-dashed-clip)">
    <animate attributeName="x1" from="600" to="700" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
    <animate attributeName="y1" from="600" to="800" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
    <animate attributeName="x2" from="400" to="500" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
    <animate attributeName="y2" from="200" to="400" dur="7s" begin="0s" fill="remove" repeatCount="indefinite"/>
  </line>

</svg>

Answer 1

这是因为您移动虚线的距离是 223.6，(sqrt(100^2 + 200^2))，这不是您的虚线长度 (44) 的倍数。所以当动画到达终点并重复时，就有了跳跃。

如果您调整您的 dasharray 使其更接近长度的偶数部分，则跳转将消失。

stroke-dasharray="22.36, 22.36"

顺便说一句，制作动画的方法要简单得多。无需移动线条并使用clipPath 隐藏溢出，只需为stroke-dashoffset 设置动画即可。见下文。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" []>
<svg version="1.1" id="feynman-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="700px" height="600px" viewBox="0 0 700 600" style="border: 1px solid black;top:0;right:0;bottom:0;left:0;position:absolute;margin:auto;"
xml:space="preserve">

  <!-- MW line -->
  <polyline style="fill:none;stroke:#000000" points="0,600 200,200 300,400 400,200 500,400 700,0" />

  <!-- Top Dashed Line -->
  <line style="fill:none;stroke:#000000" stroke-dasharray="22.36, 22.36" x1="100" y1="0" x2="200" y2="200">
    <animate attributeName="stroke-dashoffset" from="0" to="223.6" dur="7s" begin="0s" fill="remove" repeatCount="indefinite" />
  </line>

  <!-- Bottom Dashed Line -->
  <line style="fill:none;stroke:#000000" stroke-dasharray="22.36, 22.36" x1="600" y1="600" x2="500" y2="400" clip-path="url(#bottom-dashed-clip)">
    <animate attributeName="stroke-dashoffset" from="0" to="223.6" dur="7s" begin="0s" fill="remove" repeatCount="indefinite" />
  </line>

</svg>