程序员经验分享-hwhale

Alt 标签可以用于内联 SVG 吗？

2024-01-21

有没有办法给内联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 http://jsfiddle.net/FsCMM


您应该使用 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 元素包裹图形并将 title 元素插入其中。

<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

SVG

accessibility

Alt

Alt 标签可以用于内联 SVG 吗？ 的相关文章

  • 宽度：适合内容；在 Chrome 上工作，但在资源管理器上不工作

    我构建了一个应用程序 所有内容都在 Chrome 中完美显示 但如果我在 Windows 资源管理器中打开该应用程序 容器会比应有的小 我在用着width fit content 这是只适用于 Chrome 的东西吗 我怎样才能使其适用于所

  • PHP 共享标头而不使用服务器端脚本？

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有

  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是

  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人

  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载！仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr

  • 从 MVC 中的 FormCollection 获取选定的下拉列表值

    我有一个使用 MVC 发布到操作的表单 我想从操作中的 FormCollection 中提取选定的下拉列表项 我该怎么做 我的 HTML 表单

  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px

  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads

  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli

  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有

  • 使用 jQuery 清除 IMG

    我正在尝试从 a 中删除加载的图像 img 元素 但清除或删除 src 不会执行此操作 该怎么办 HTML img src https www google com images srpr logo3w png JQUERY img att

  • 如何在HTML中的PHP中注释掉HTML和PHP？

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗

  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po

  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly

  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun

  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr

  • 为什么“tbody”不设置表格的背景颜色？

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro

  • 优雅降级 - 何时考虑

    在为使用 AJAX 的应用程序设计和构建 UI 时 您何时考虑优雅降级 对于禁用 JavaScript 或正在使用屏幕阅读器的用户 最后 网站的 AJAX 版本完全完成后 在每个发展阶段 I don t 还有别的事 这些日子 渐进增强 ht

  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react

  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

随机推荐

热门标签