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”选项）时，如果不给alt它一个role="img".

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

SVG 具有<title>属性（就像alt在图像上一样）和<desc>提供有关图像的更多详细信息的属性。

Carie Fisher有一篇关于可访问 SVG 的精彩文章

似乎获胜的模式是：

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

所以这最终就是您需要<Logo组件来生成的！

因此，如果您使用第一个选项（这样您就可以在文档中使用 CSS 进行样式设置，而使用选项 2 则无法做到这一点），然后调整 SVG 以包含 a<title>并aria-labelledby指向该标题的 ID，您将获得所需的内容需要。

关键点是，您alt现在基本上<title>就是将标题链接到 SVG，aria-labelledby只是为了提高兼容性。

在反应中

从 React 获取这样的 html 输出应该可以通过

<Logo title='accessible Logo title'/>

从React 3.1开始