是否可以禁用 svg 的动画元素以进行首选减少运动媒体查询？

Question

我有一个使用

animateTransform

元素完成动画的 svg

<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>
</svg>

如果用户打开了

prefers-reduced-motion

，我想禁用此动画

我尝试通过 css 禁用一些属性，但没有成功

<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>
    animateTransform {
      display: none;
      dur: 0s;
      repeatCount: 0;
    }
  </style>
</svg>

Answer 1

CSS 无法访问

<animate>

元素中指定的任何 SMIL 动画相关属性。

但是您可以通过 JavaScript 检查当前首选的运动配置。

let reducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
console.log('reducedMotion', reducedMotion)

if (reducedMotion) {
  stopSmilAnimations();
} 


function stopSmilAnimations(){
  let svgs = document.querySelectorAll("svg");
  svgs.forEach(svg=>{
      svg.pauseAnimations();
  })
}

<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>
</svg>

如果检测到

prefers-reduced-motion

，您可以通过

svg.pauseAnimations()

运行暂停所有 svg 动画的函数。