Bug in Safari bei Multiline SVG Text mit und CSS text-transform

Bei der Umsetzung eines Designs mussten wir für die spezielle Darstellung von Text das SVG Element einsetzen um mehrere Textzeilen darzustellen. Der SVG Text sollte dabei Versal dargestellt werden, was wir mit einem einfachen <div> und entsprechender Klasse als Parent-Element vom SVG realisiert haben.

Das Code-Snippet vereinfacht:

<style>
    .title{
        text-transform:uppercase;        
     }
</style>

<div class="title">
    <svg width="660" height="220" style="font-size: 2em; overflow: visible;">
        <text x="280" y="80">
            <tspan>SVG 1</tspan>
            <tspan x="280" dy="24" fill="red">SVG 2</tspan>
        </text>
    </svg>
</div>  

Erhaltene Anzeige in sämtlichen Browsern ausser Safari – Alles perfekt!

browserold1

Erhaltene Anzeige in Safari (inkl. iOS) – Letzter Buchstaben wird umgebrochen!
browserold2

Kurz vor’m Durchdrehen weil keine Lösung in Sicht und kein entsprechender Bug gemeldet ist, bin ich nach dem Ausschluss-Verfahren vorgegangen und siehe da, das «text-transform» der Klasse vom Parent-Element war schuld. Also dieses direkt dem <tspan> zugewiesen:

<style>
    tspan{
        text-transform:uppercase;        
     }
</style>

<div class="title">
    <svg width="660" height="220" style="font-size: 5em; overflow: visible;">
        <text x="280" y="80">
            <tspan>Line 1</tspan>
            <tspan x="280" dy="60" fill="green">Line 1</tspan>
        </text>
    </svg>
</div> 

Anschliessend die neue Anzeige im Safari – Alles perfekt, juhuii!

browsernew2

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


The reCAPTCHA verification period has expired. Please reload the page.