Alt-tag möglich, die inline-SVG?

Gibt es eine Möglichkeit zu geben, eine inline-SVG-ein alt tag? Hier ist der code, den ich für mein inline-SVG, aber der alt - tag wird nicht angezeigt (und ich bin mir auch nicht sicher, dass die Art und Weise, dass ich kodierte die alt tag gültig ist, nach der Suche online für die Klarstellung):

<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 das JSFiddle: http://jsfiddle.net/FsCMM

Warum soll das alt-Attribut? Für Hilfe-text verwenden, können Sie das title-Attribut und für die Erreichbarkeit, es gibt eine offizielle Empfehlung, muss noch umgesetzt werden, vom Bildschirm-Leser. Check out die Antwort
Was ich Suche, zu tun ist, bieten die "Helfer-text" (die ich versuchte zu beschreiben einfach als "alt-text"). Danke für den link... ich habe es gelesen, obwohl ich nicht sehen kann, den <title> tags, die Angabe "Helfer-text" bei der Maus-über, wie ich versucht habe in mein JSFiddle. Dies ist für das, was ich Suche (ähnlich einem image "alt-text"): ein Attribut, das beschreibt das SVG mit "Helfer-text", wenn ein Maus-Maus über Sie. Danke!
die HTML5 inline-svg-element nicht unterstützt die "alt" - Attribut, weil es als Phrasierung Inhalt: w3.org/TR/html5/dom.html#phrasing-content-1
Danke für die Dokumentation. Ich Frage mich, ob es ist eine andere Art von Attribut inline SVGs, die ermöglicht, dass eine ähnliche "Helfer-text" auf der Maus über.
Möglich, Duplikat der Accessibility-Empfehlung: alt-text-Konvention für SVG und MathML?

InformationsquelleAutor Berklie | 2014-04-18

Sollten Sie verwenden, title-element, nicht das alt-tag, um QuickInfos anzuzeigen:

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

für chrome34: wrap Grafiken von g-element und einfügen, Titel-element an dieser.

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

Wann werfe ich den <title> tags in der JSFiddle von oben, können Sie nicht helfen knallen jeder "Helfer der text" bis auf die Maus über. Können Sie bekommen, es zu zeigen? (Google Chrome 34.0.1847.116)
Hinzufügen <g> hilft auch im Fall von <svg> mit <xpath:href> innerhalb. <svg><title>...</title><xpath:href>... zeigt alt-text in Firefox aber nicht in Chrome. Hinzufügen <g> vor den <title> behebt Chrome Verhalten.
Mai 2019, das gibt einen "Schweregrad" Hoch "Problem" in der SEO-Analyzer in den Bing-Webmaster-Tools. Es scheint Bing nicht zu unterscheiden zwischen SVG title-tags und der title-tag in den Kopf; daher klagt die website hat mehrere title-tags. Diese info kann nicht eine Priorität für alle, aber es kann nützlich sein, für einige.

InformationsquelleAutor defghi1977

-2

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

Con esto solucionas el tema.

SALUDOS!
RAUL

Sie könnten zu wollen, zu erklären (in Englisch) wie man das löst die Frage.

InformationsquelleAutor carbap1

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.