SVG元素CSS过渡特性检测及IE等浏览器兼容问题咨询

你遇到的问题本质是：CSS Transitions只能监听CSS属性的变化，而你修改的y是SVG元素的XML属性，不是CSS属性。Chrome和Safari做了额外兼容，允许过渡SVG属性，但IE11、旧Edge和Firefox不支持这种行为。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：使用CSS Transform实现过渡（推荐） #

把SVG元素的位置调整从修改y属性改成用CSS transform: translateY()，这样所有支持CSS Transition的浏览器（包括IE11）都能正常触发动画。

修改后的代码示例：

button {
  display: block;
  margin: 1em 0;
}
#rect {
  /* 定义过渡效果 */
  transition: transform 0.3s ease;
}
/* 移动后的状态类 */
#rect.moved {
  transform: translateY(250px); /* 原y值从50到300，差值为250 */
}

document.getElementById("button").addEventListener("click", moveRect, false);
function moveRect() {
  var rect = document.getElementById("rect");
  rect.classList.toggle("moved"); // 切换类触发过渡
}

<svg width="400" height="400">
  <rect id="rect" x="50" y="50" width="100" height="100" fill="blue" />
</svg>

这个方法符合CSS标准，兼容性最好，代码也简洁易维护。

方案2：使用SVG SMIL动画 #

如果一定要通过修改属性来实现动画，可以用SVG原生的SMIL动画，IE11、Firefox和所有现代浏览器都支持SMIL。你可以直接在SVG里定义动画，或者用JS触发：

示例代码：

document.getElementById("button").addEventListener("click", moveRect, false);
function moveRect() {
  var rect = document.getElementById("rect");
  // 创建SMIL动画元素
  var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  animate.setAttribute("attributeName", "y");
  animate.setAttribute("from", "50");
  animate.setAttribute("to", "300");
  animate.setAttribute("dur", "0.3s");
  animate.setAttribute("fill", "freeze"); // 动画结束后保持最终状态
  rect.appendChild(animate);
  // 启动动画
  animate.beginElement();
}

<svg width="400" height="400">
  <rect id="rect" x="50" y="50" width="100" height="100" fill="blue" />
</svg>

SMIL是SVG原生的动画方案，不需要依赖CSS，适合纯SVG场景。

方案3：JavaScript手动实现动画（兼容性最强） #

如果以上两种方法都不适用，可以用requestAnimationFrame手动计算每一帧的位置，实现完全可控的动画：

示例代码：

document.getElementById("button").addEventListener("click", moveRect, false);
function moveRect() {
  var rect = document.getElementById("rect");
  var startY = 50;
  var targetY = 300;
  var duration = 300; // 动画时长，单位毫秒
  var startTime = Date.now();

  function animate() {
    var elapsed = Date.now() - startTime;
    var progress = Math.min(elapsed / duration, 1);
    // 这里用线性缓动，你可以替换成ease-in-out等自定义缓动函数
    var currentY = startY + (targetY - startY) * progress;
    rect.setAttributeNS(null, "y", currentY);
    
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

这个方法完全不依赖浏览器的CSS或SVG动画支持，兼容性覆盖所有能运行JS的浏览器，但代码相对繁琐。

内容的提问来源于stack exchange，提问作者mattstuehler