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>

SVG跳过/紧张不安

1 个答案: