如何为视力正常的读者实现 SVG `<use href>` 元素的回退？

编程问答 2022-04-25

问题描述

我有一个带有片段的 HTML5 文档

<p class="special">Some text with an icon
<svg class=\"icon\">
<title>alternative text content for accessibility</title>
<use href="icons.svg#foo"></use>
</svg> in the middle of sentence.</p>

<title> 元素用于为可访问性指定替代内容。但是，如果 <use href> 无法加载所需的引用资源以正确呈现图像，我应该如何标记视力正常的读者的替代内容？似乎默认操作是将元素 <use> 呈现为完全透明。

我本希望看到 <use alt="..."> 为引用的资源定义回退，但这似乎不存在。 如何为视力正常的读者指定后备内容（即不使用可以访问 <title> 的辅助工具）？

我正在尝试使用内联 CSS 来允许引用的图形使用 style="fill:currentColor" 从上下文继承正确的颜色（其颜色是使用选择器 p.special 通过 CSS 定义的）。我知道如果我使用 HTML5 <img> 元素，我可以只使用属性 alt。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accessibilityaccessibilityfallbackhtmlsvgsvgsvg