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

Posted 2023-02-22

【中文标题】对 SVG React 组件进行样式设置和替换

【英文标题】：Styling and alt-ing a SVG React component

【发布时间】：2022-01-06 23:39:19

【问题描述】：

我想导入一个 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   class='someClass'/>

【参考方案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

【讨论】：

效果很好。我编辑了您的答案以提供如何在 React 中设置标题。

@Kangur 没问题，编辑很棒，很高兴它有帮助！

@IngoSteinke 修复了它，在手机上写回复的问题......该死的自动更正，现在修复了，好地方！

@GrahamRitchie 直到我看到你的评论才注意到是谁写的 :-)

@IngoSteinke ??