0

我在http://jsfiddle.net/emanuensis/H68jS尝试了一个简单的 SVG 图形的 SMIL 动画这个想法是，每个鼠标向上或向下移动都会导致黄色圆盘朝那个方向移动 1 秒并停止......并从该位置等待进一步的鼠标悬停。

不幸的是，现实（在 FF 和 Chrome 中）是非常多变的。有时它似乎采用了'fill =“freeze”'属性，有时它会一直向上或向下重新启动，有时它会在多次迭代之前停止的地方重新启动。

这是我第一次使用http://www.w3.org/TR/smil-animation上的规范，所以我想我做错了什么，或者遗漏了一些属性，但我不知道是哪个或在哪里。

繁琐的代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="400" height="500"
  version="1.1">
<text id="tup" x="48 " y="33" >up  </text>
<text id="tdn" x="235" y="33" >down</text>
<rect id="trect" style="fill:yellow;stroke:red;"
    width="20" height="20" x="75" y="0" rx="5" ry="5" >
<animate id="tr"
  begin="tdn.mouseover"
  end="tdn.mouseover+1s"
  attributeName="x"
  additive="sum"
  fill = "freeze"
  restart = "whenNotActive"
  to="50"
  dur="5s"
  repeatCount="1" />
  <animate id="rt"
  begin="tup.mouseover"
  end="tup.mouseover+1s"
  attributeName="x"
  additive="sum"
  fill = "freeze"
  restart = "whenNotActive"
  to="250" dur="5s"
  repeatCount="1"/>
  </rect>
</svg>
4

0 回答 0