Question

因此，此Codepen显示了使用javascript设置圆形和文本元素的新位置的尝试的圆形和文本XY动画。

圆会按预期设置动画效果，但是文本会跳到新位置。

HTML ...

<svg>
  <circle cx="50" cy="50" r="20" fill="#c0c0c0"/>
  <text x="50" y="50">Hello</text>
</svg>
<div>
  <button>Animate</button>
</div>

CSS ...

svg {
  background-color:#e0e0e0;
}
circle,text {
  transition: 1.0s;  
}

JavaScript ...

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('circle').setAttribute('cx', 200);
  document.querySelector('text').setAttribute('x', 200);
})

有没有一种方法可以通过javascript在文本上设置新的XY位置，从而在当前位置和新位置之间产生漂亮的动画（就像圆圈一样）？需要明确的是，如果可能的话，我不希望通过javascript设置动画（除了设置结束位置）。

Answer 1

不要通过CSS来做到这一点：CSS动画仅适用于CSS（惊奇），而您要设置动画的是SVG属性。

改为让JS插入/更新与您的rect相关联的AnimateTransform元素，这是SVG的动画内容内置方法。

Answer 2

如果您在Firefox中检查示例，则圆圈也不会显示动画。实际上，坐标不能用CSS设置动画（还可以吗？）。为了使用CSS为圆形和文本设置动画，我将使用以下转换：

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('circle').style.transform="translateX(150px)";
  document.querySelector('text').style.transform="translateX(150px)";
})

svg {
  background-color:#e0e0e0;
}
circle,text {
  transform:translateX(0);
  transition: all 1.0s;  
}

<svg>
  <circle cx="50" cy="50" r="20" fill="#c0c0c0"/>
  <text x="50" y="50">Hello</text>
</svg>
<div>
  <button>Animate</button>
</div>

使用JS / CSS动画化SVG文本的XY位置

2 个答案: