SVG内联元素是否支持Alt标签？

Question

SVG内联元素是否支持Alt标签？

23

有没有办法给内联SVG添加alt标签？这是我为我的内联SVG编写的代码，但alt标签没有显示（而且我甚至不确定我编写alt标签的方式是否有效，在网上搜索了澄清之后）：

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve" alt="Hello world!">
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
    <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</svg>

以下是 JSFiddle 的链接：http://jsfiddle.net/FsCMM

- Berklie

3

为什么需要alt属性？对于帮助文本，您可以使用title属性；而对于可访问性，有一个官方建议尚未被屏幕阅读器实现。请查看此答案。 - BenjaminGolder

我想要做的是提供“辅助文本”（我试图简单描述为“alt文本”）。谢谢您提供链接......我已经阅读了它，但是我看不到<title>标签在鼠标悬停时提供任何“辅助文本”，就像我在JSFiddle中尝试过的那样。这是我要找的（类似于图像的“alt文本”）：一个属性，当鼠标悬停在SVG上时会描述带有“辅助文本”的SVG。谢谢！ - Berklie

HTML5内联SVG元素不支持“alt”属性，因为它被视为短语内容：http://www.w3.org/TR/html5/dom.html#phrasing-content-1 - Michael Mullany

谢谢提供文档。我想知道是否有其他内联SVG属性可以在鼠标悬停时提供类似的“帮助文本”。 - Berklie

2

可能是无障碍性：SVG和MathML推荐的alt-text约定？的重复问题。 - Daniel Tonon

2个回答

5

使用 <title> 标签，效果良好，下面的示例展示了多个路径的标题（类似于图片的alt属性）：

<svg height="200pt" viewBox="0 0 200 200" width="200pt" style="background-color: var(--background);">
    <g>
        <title>Gray path</title>
        <path fill="none" stroke="gray" stroke-width="20" d="M 179.89754857473488 95.95256479386293 A 80 80 0 0 0 100 20">
        </path>
    </g>
    <g>
        <title>Red path</title>
        <path fill="none" stroke="red" stroke-width="20" d="M 91.90160519334194 179.58904448198567 A 80 80 0 0 0 179.89754857473488 95.95256479386293">
        </path>
    </g>
    <g>
        <title>Blue path</title>
        <path fill="none" stroke="blue" stroke-width="20" d="M 32.111795102681654 57.67752800438377 A 80 80 0 0 0 91.90160519334194 179.58904448198567">
        </path>
    </g>
    <g>
        <title>Green path</title>
        <path fill="none" stroke="green" stroke-width="20" d="M 99.99999999999999 20 A 80 80 0 0 0 32.111795102681654 57.67752800438377">
        </path>
    </g>
</svg>

- Ashkan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- defghi1977 · Accepted Answer

您应该使用title元素而不是alt标签来显示工具提示：

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
    <title>Hello world!</title>
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
        <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</svg>

针对 Chrome34：将图形包装在 g 元素中，并将标题元素插入其中。

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
<g>
    <title>Hello world!</title>
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
        <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</g>
</svg>