我正在做一個反應組件，它是一個 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 屬性值必須是唯一的”。
有什么辦法可以避免這個錯誤嗎？
我嘗試aria-hidden在svg元素和每個animate元素中都使用，但沒有成功。
uj5u.com熱心網友回復：
您目前需要這些<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>元素，在兩個相互參考的影片元素上使用valuesand 屬性而repeatCount不是toandfrom屬性。完全相同的影片可以這樣實作：
<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。
uj5u.com熱心網友回復：
也許你可以在 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>
)
}轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395216.html
上一篇：UseContext找不到變數？