如何通过prefers-reduced-motion媒体查询禁用SVG的animateTransform动画？

问题分析 #

你之前的尝试无效，主要有两个原因：

• 没有针对prefers-reduced-motion媒体查询设置样式，导致你的CSS是全局生效而非仅在用户开启减少动效时触发；
• SVG动画元素的dur、repeatCount等属性属于SVG专属属性，无法通过CSS直接覆盖修改。

可行解决方案 #

方案1：直接隐藏动画元素（回到初始状态）

当用户开启减少动效时，直接隐藏animateTransform元素，让图形回到初始位置：

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle cx="50" cy="50" r="30" fill="red"/>
    <animateTransform
      attributeName="transform"
      dur="1s"
      type="translate"
      repeatCount="indefinite"
      from="100 -25"
      to="-100 25"
    />
  </g>
  <style>
    @media (prefers-reduced-motion: reduce) {
      animateTransform {
        display: none;
      }
    }
  </style>
</svg>

方案2：让动画瞬间完成并停在终点

如果需要图形保持动画的最终状态，可将动画时长设为极短，仅播放一次：

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle cx="50" cy="50" r="30" fill="red"/>
    <animateTransform
      attributeName="transform"
      dur="1s"
      type="translate"
      repeatCount="indefinite"
      from="100 -25"
      to="-100 25"
      id="motionAnim"
    />
  </g>
  <style>
    @media (prefers-reduced-motion: reduce) {
      #motionAnim {
        dur: 0.001s;
        repeatCount: 1;
        fill: forwards;
      }
    }
  </style>
</svg>

说明 #

• 方案1适合不需要保留动画终点状态的场景，图形会立即回到初始位置；
• 方案2通过极短的动画时长快速完成一次播放，fill: forwards确保动画停在结束帧，适合需要保持最终位置的需求。

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