出於可訪問性目的隱藏和 SVG 的動畫 id

Question

我正在做一個反應組件，它是 SVG animation。 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

您目前需要在這些<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而不是兩個相互引用的 animation 元素上的to和from屬性。 完全相同的 animation 可以這樣實現：

 <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。

Answer 2

也許你可以在 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> ) }