Positionierung eines Textes in einer SVG // dazu IE Probleme
bearbeitet von
Hallo Thomas,
habe es ausprobiert und mein Quelltext ist:
~~~HTML
`<h1>
<svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="verticalPath" fill="none" stroke="none"
d="M40,250 V0 Z"/>
</defs>
<use xlink:href="#verticalPath" fill="none" stroke="none" />
<text x="125" text-anchor="middle">
<textpath xlink:href="#verticalPath">Meine Überschrift</textpath>
</text>
<rect x=4 y=4 width=42 height=242 stroke-width="5" stroke="orange" fill="none"/>
</svg>
</h1>`
~~~
Bei Opera und im Firefox sieht es recht ordentlich aus: [Test-Umgebung](https://www.tassilosturm.de/test-umgebung/svg_vertikal-schrift_demo_V1.html)
Nur im Edge irgendwiue befremdlich: [](/images/78c8508a-73b9-428b-b234-2a977050ec5c.jpg)
Woher kommt das? Was ist da noch falsch?
MFG der misanthrop
Positionierung eines Textes in einer SVG // dazu IE Probleme
bearbeitet von
Hallo Thomas,
habe es ausprobiert und mein Quelltext ist:
~~~HTML
`<h1>
<svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="verticalPath" fill="none" stroke="none"
d="M40,250 V0 Z"/>
</defs>
<use xlink:href="#verticalPath" fill="none" stroke="none" />
<text x="125" text-anchor="middle">
<textpath xlink:href="#verticalPath">Tassilo Sturm</textpath>
</text>
<rect x=4 y=4 width=42 height=242 stroke-width="5" stroke="orange" fill="none"/>
</svg>
</h1>`
~~~
Bei Opera und im Firefox sieht es recht ordentlich aus: [Test-Umgebung](https://www.tassilosturm.de/test-umgebung/svg_vertikal-schrift_demo_V1.html)
Nur im Edge irgendwiue befremdlich: [](/images/78c8508a-73b9-428b-b234-2a977050ec5c.jpg)
Woher kommt das? Was ist da noch falsch?
MFG der misanthrop