neue SVG Spritemap
bearbeitet von
@@marctrix
> erlaubt die use-Variante eigentlich das `title`-Element
Ja. Im Prizip schon.
~~~HTML
<svg style="display: none">
<symbol id="circle" viewBox="-1 -1 2 2">
<circle r="1"/>
</symbol>
<symbol id="circle-with-title" viewBox="-1 -1 2 2">
<title>symbol title</title>
<circle r="1"/>
</symbol>
</svg>
<a href="">
<svg fill="var(--red, red)"><use href="#circle-with-title"/></svg>
</a>
<a href="" title="svg title">
<svg fill="var(--yellow, yellow)"><use href="#circle"/></svg>
</a>
<a href="" title="svg title">
<svg fill="var(--green, green)"><use href="#circle-with-title"/></svg>
</a>
~~~
Chrome zeigt beim roten Licht *„symbol title“*{:@en} als Tooltip an; beim gelben *„svg title“*{:@en} und beim grünen gewinnt *„symbol title“*{:@en}.
Firefox zeigt beim roten Licht keinen Tooltip an, beim gelben *„svg title“*{:@en} und beim grünen dann natürlcich auch *„svg title“*{:@en}.
Safari zeigt keine Lichter‽ WTF‽
Zum Ausprobieren: [Codepen](https://codepen.io/gunnarbittersmann/pen/XPpeJz)
> (kann für Screenreader-Ausgabe genutzt werden).
Mag da mal jemand in Screenreadern testen, ob die `title`s vorgelesen werden? Inbesondere das aus dem `symbol`-Element, welches nicht als Tooltip angezeigt wird?
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
> erlaubt die use-Variante eigentlich das `title`-Element
Ja. Im Prizip schon.
~~~HTML
<svg style="display: none">
<symbol id="circle" viewBox="-1 -1 2 2">
<circle r="1"/>
</symbol>
<symbol id="circle-with-title" viewBox="-1 -1 2 2">
<title>symbol title</title>
<circle r="1"/>
</symbol>
</svg>
<a href="">
<svg fill="var(--red, red)"><use href="#circle-with-title"/></svg>
</a>
<a href="" title="svg title">
<svg fill="var(--yellow, yellow)"><use href="#circle"/></svg>
</a>
<a href="" title="svg title">
<svg fill="var(--green, green)"><use href="#circle-with-title"/></svg>
</a>
~~~
Chrome zeigt beim roten Licht *„symbol title“*{:@en} als Tooltip an; beim gelben *„svg title“*{:@en} und beim grünen gewinnt *„symbol title“*{:@en}.
Firefox zeigt beim roten Licht keinen Tooltip an, beim gelben *„svg title“*{:@en} und beim grünen dann natürl
Safari zeigt keine Lichter‽ WTF‽
Zum Ausprobieren: [Codepen](https://codepen.io/gunnarbittersmann/pen/XPpeJz)
> (kann für Screenreader-Ausgabe genutzt werden).
Mag da mal jemand in Screenreadern testen, ob die `title`s vorgelesen werden? Inbesondere das aus dem `symbol`-Element, welches nicht als Tooltip angezeigt wird?
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
neue SVG Spritemap
bearbeitet von
@@marctrix
> erlaubt die use-Variante eigentlich das `title`-Element
Ja. Im Prizip schon.
~~~HTML
<svg style="display: none">
<symbol id="circle" viewBox="-1 -1 2 2">
<circle r="1"/>
</symbol>
<symbol id="circle-with-title" viewBox="-1 -1 2 2">
<title>symbol title</title>
<circle r="1"/>
</symbol>
</svg>
<a href="">
<svg fill="var(--red, red)"><use href="#circle-with-title"/></svg>
</a>
<a href="" title="svg title">
<svg fill="var(--yellow, yellow)"><use href="#circle"/></svg>
</a>
<a href="" title="svg title">
<svg fill="var(--green, green)"><use href="#circle-with-title"/></svg>
</a>
~~~
Chrome zeigt beim roten Licht *symbol title*{:@en} als Tooltip an; beim gelben *svg title*{:@en} und beim grünen gewinnt *symbol title*{:@en}.
Firefox zeigt beim roten Licht keine Tooltip, beim gelben *svg title*{:@en} und beim grünen dann natürlcih auch *svg title*{:@en}.
Safari zeigt keine Lichter‽ WTF‽
Zum Ausprobieren: [Codepen](https://codepen.io/gunnarbittersmann/pen/XPpeJz)
> (kann für Screenreader-Ausgabe genutzt werden).
Mag da mal jemand in Screenreadern testen, ob die `title`s vorgelesen werden? Inbesondere das aus dem `symbol`-Element, welches nicht als Tooltip angezeigt wird?
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann