对 SVG React 组件进行样式设置和替换

Question

我想导入一个 svg 图像，使用类对其进行样式设置并提供替代文本以使其易于访问。我不知道该怎么做。

import { default as LogoSrc, ReactComponent as Logo } from "./logo.svg";

const svgTag = () => {
  // this produces html: <svg class='someClass'/>
  // alt is not visible  
  return <Logo className='someClass' alt='logo'/>  
}
const imgTag = () => {
  // this produces <img src="logo.svg" alt='logo' class='someClass'/>  
  // svg is not styled
  return <img src={LogoSrc} alt="logo"  class='someClass'/>
}

Answer 1

当内联 SVG（您的“svgTag”选项）时，如果不给它一个 role="img"，就不能使用 alt 属性。

不过，还有一种更好的方法可以在 SVG 上为屏幕阅读器添加文本。

SVG 具有<title> 属性（可以将其想象为图像上的alt）和<desc> 属性以提供有关图像的更多详细信息。

有一个great article by Carie Fisher on accessible SVGs

似乎胜出的模式是：

<svg role="img" aria-labelledby="svg1Title" class="someClass">
   <title id="svg1Title">Logo</title>
   [SVG paths etc.]
</svg>

所以这最终是你需要你的<Logo 组件来生产的！

因此，如果您使用第一个选项（以便您可以在文档中使用 CSS 设置样式，则无法使用选项 2）然后调整 SVG 以包含一个 <title> 和指向该标题的ID，您将拥有所需的内容。

关键是您的 alt 现在基本上是 <title> 并且您使用 aria-labelledby 将该标题链接到 SVG 只是为了提高兼容性。

在反应中

应该可以从 react 获取这样的 html 输出

<Logo title='accessible Logo title'/>

自从React 3.1