Alt-Tag für Inline-SVG möglich? - Hervorragende Bibliothek

Gibt es eine Möglichkeit, einem Inline-SVG einen alt Tag zu geben? Hier ist der Code, den ich für meinen Inline-SVG habe, aber der alt-Tag wird nicht angezeigt (und ich bin nicht einmal sicher, dass die Art und Weise, dass ich codierte den alt Tag gültig ist, nach online Klärung der Suche):Alt-Tag für Inline-SVG möglich?

<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>

Und hier ist der JSFiddle: http://jsfiddle.net/FsCMM

Quelle

2014-04-18 Berklie

Warum möchten Sie das Alt-Attribut? Für Hilfstexte können Sie das title-Attribut verwenden, und für die Barrierefreiheit gibt es eine offizielle Empfehlung, die noch von den Screenreadern implementiert werden muss. Check out [diese Antwort] (http://stackoverflow.com/a/4754646/399726) – BenjaminGolder

Was ich zu tun suche ist "Hilfstext" (die ich versuchte einfach zu beschreiben als "alt text"). Danke für den Link ... Ich habe es gelesen, obwohl ich die Tags nicht sehen kann, die irgendeinen "Hilfstext" bei der Mausübergabe liefern, wie ich es in meinem JSFiddle probiert habe. Dies ist für das, was ich suche (ähnlich einem Bild "alt text"): ein Attribut, das die SVG mit "Helfertext" beschreibt, wenn eine Maus darüber mausiert. Vielen Dank! – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/908086/">Berklie</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Das HTML5-Inline-Svg-Element unterstützt das Attribut "alt" nicht, da es als Phrasierungsinhalt betrachtet wird: http://www.w3.org/TR/html5/dom.html#phrasing-content-1 – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">Antwort</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">2<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Sie Titelelement verwendet werden soll, nicht alt tag, Tooltips angezeigt werden:</p> <pre><code class="prettyprint-override"><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> </code></pre> <hr> <p>für chr ome34: wrap Grafiken von g-Element und einfügen Titelelement zu diesem.</p> <pre><code class="prettyprint-override"><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> </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/23149024">Quelle</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2014-04-18 06:57:19</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/1988795/">defghi1977</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">Wenn ich die <title> Tags in den JSFiddle von oben werfe, helfen sie nicht, irgendeinen "Hilfstext" bei der Mausübergabe zu öffnen. Kannst du es zeigen? (Google Chrome 34.0.1847.116) – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/908086/">Berklie</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Hinzufügen <g> hilft auch im Fall von <svg> mit <xpath:href> innen. <svg><title> ... ... wird alternativen Text in Firefox anzeigen, aber nicht in Chrome. Durch Hinzufügen von vor wird das Chrome-Verhalten behoben. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/3179428/">lenrok258</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">-2<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <pre><code class="prettyprint-override"><svg viewBox="0 -10 300 300" width="100%" height="100%" > <g> <title>Hola Mundo</title> <a href="https://developer.mozilla.org/en-US/docs/SVG" target="_blank"> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1;fill-opacity:0.8" /> </a> </g> <g> <title>Aguante el Rojo</title> <a xlink:href="http://www.carbap.org" xlink:show="new" target="_blank"> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> </a> </g> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:purple;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:purple;stroke-width:1" /> <g> <title>Hello world!</title> <path d="..." stroke="black" stroke-width="1" fill="lime" fill-opacity=0.5 /> </g> Sorry, your browser does not support inline SVG. </svg> </code></pre> <p>Con esto solucionas el tema.</p> <p>SALUDOS! RAUL</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/46941869">Quelle</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2017-10-25 20:53:07</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/6441144/">carbap1</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Sie könnten erklären wollen (auf Englisch), wie dies die Frage löst. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048381"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Letzte Frage </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://de.uwenku.com/question/p-dakfrpsz-cc.html" target="_blank" title="Spring Integration HTTP Eingehende Gateway Request Overlap"> Spring Integration HTTP Eingehende Gateway Request Overlap </a> </li> <li class="side_article_list_item"> 2. <a href="http://de.uwenku.com/question/p-vdrhoarg-bv.html" target="_blank" title="ZipEntry zu Byte-Array"> ZipEntry zu Byte-Array </a> </li> <li class="side_article_list_item"> 3. <a href="http://de.uwenku.com/question/p-fishscae-bw.html" target="_blank" title="Wie erhalten Sie Werte von EditText von einer anderen Klasse in Android?"> Wie erhalten Sie Werte von EditText von einer anderen Klasse in Android? </a> </li> <li class="side_article_list_item"> 4. <a href="http://de.uwenku.com/question/p-rcsqscaw-bn.html" target="_blank" title="Änderungsbetrag hinzufügen und Gesamtwert in Kontrollkästchen in Ionic ändern"> Änderungsbetrag hinzufügen und Gesamtwert in Kontrollkästchen in Ionic ändern </a> </li> <li class="side_article_list_item"> 5. <a href="http://de.uwenku.com/question/p-xmwzpvfd-bo.html" target="_blank" title="Falsche Syntax in der Nähe des Schlüsselwortes "WHERE" beim Aktualisieren von Tabelle mit SQLMetal generierte Klasse"> Falsche Syntax in der Nähe des Schlüsselwortes "WHERE" beim Aktualisieren von Tabelle mit SQLMetal generierte Klasse </a> </li> <li class="side_article_list_item"> 6. <a href="http://de.uwenku.com/question/p-ehgbkndm-bp.html" target="_blank" title="Redshift join mit varchar (40) und 2,3 Milliarden Zeilen"> Redshift join mit varchar (40) und 2,3 Milliarden Zeilen </a> </li> <li class="side_article_list_item"> 7. <a href="http://de.uwenku.com/question/p-nafgbsrj-bq.html" target="_blank" title="Speicherleck mit Vorlage für Zeiger und Ints. Was mache ich falsch?"> Speicherleck mit Vorlage für Zeiger und Ints. Was mache ich falsch? </a> </li> <li class="side_article_list_item"> 8. <a href="http://de.uwenku.com/question/p-bwrqvrcg-br.html" target="_blank" title="Erhalten Sie die vollständige Anfrage URL von WebDriver-Modul in Codeception"> Erhalten Sie die vollständige Anfrage URL von WebDriver-Modul in Codeception </a> </li> <li class="side_article_list_item"> 9. <a href="http://de.uwenku.com/question/p-xwscwbxf-bm.html" target="_blank" title="Wie durchlaufen SQL und drucken Ausgabezeit"> Wie durchlaufen SQL und drucken Ausgabezeit </a> </li> <li class="side_article_list_item"> 10. <a href="http://de.uwenku.com/question/p-czwymikd-bk.html" target="_blank" title="Keeping Shiny Reactive Radio Buttons Konstante"> Keeping Shiny Reactive Radio Buttons Konstante </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Verwandte Themen</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Keine verwandten Themen^_^</li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://de.uwenku.com/contact">Sprechen Sie uns an</a></li> <li>© 2020 DE.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>