出于可访问性目的隐藏和 SVG 的动画 id

Question

我正在做一个 React 组件，它是一个 SVG 动画。 React组件的代码是这样的：

const Loading = ({ className, ...props }) => {
  return (
    <svg
      aria-label="animated block"
      width="32"
      height={"32"}
      className={className}
      {...props}
    >
      <rect x="1" y="0" width="19" height="8" opacity="0.4" rx="5">
        <animate
          id="anim1"
          attributeName="width"
          from="19"
          to="8"
          begin="0s;anim2.end"
          dur="0.3s"
        />
        <animate
          id="anim2"
          attributeName="width"
          from="8"
          to="19"
          begin="anim1.end"
          dur="0.3s"
        />
      </rect>
    </svg>
  )
}

当显示包含多个这些的页面时，可访问性 linter 向我显示错误“id 属性值必须是唯一的”。

有什么方法可以避免这个错误吗？

我尝试在 svg 元素和每个 animate 元素中使用 aria-hidden，但没有成功。

Answer 1

也许你可以在 props 中传递一个唯一的 id

示例：

const Loading = ({ className, id, ...props }) => {
  return (
    <svg
      aria-label="animated block"
      width="32"
      height={"32"}
      className={className}
      {...props}
    >
      <rect x="1" y="0" width="19" height="8" opacity="0.4" rx="5">
        <animate
          id={`${id}-anim1`}
          attributeName="width"
          from="19"
          to="8"
          begin="0s;anim2.end"
          dur="0.3s"
        />
        <animate
          id={`${id}-anim2`}
          attributeName="width"
          from="8"
          to="19"
          begin="anim1.end"
          dur="0.3s"
        />
      </rect>
    </svg>
  )
}

Answer 2

您目前需要这些 <animate> 元素的 ID 的唯一原因似乎是因为您有两个单独的动画，每个动画在另一个结束时开始：

<svg width="32" height="32" viewBox="0 0 32 32">
  <rect x="1" y="0" width="19" height="8" opacity="0.4" rx="5">
    <animate id="anim1" attributeName="width" from="19" to="8" begin="0s;anim2.end" dur="0.3s" />
    <animate id="anim2" attributeName="width" from="8" to="19" begin="anim1.end" dur="0.3s" />
  </rect>
</svg>

最好将其写为单个 <animation> 元素，使用 values 属性和 repeatCount 而不是 to 和 from 属性在两个相互引用的动画元素上。可以像这样实现完全相同的动画：

<svg width="32" height="32" viewBox="0 0 32 32">
  <rect x="1" y="0" width="19" height="8" opacity="0.4" rx="5">
    <animate attributeName="width" values="19;8;19" to="8" dur="0.6s" repeatCount="indefinite" />
  </rect>
</svg>

这消除了从一个元素引用另一个元素的需要，因此完全消除了对 ID 的需要。

出于可访问性目的隐藏和 SVG 的动画 id

Hide and SVG's animate ids for accessibility purposes

svg

accessibility

reactjs