tag:forum.selfhtml.org,2005:/self Positionierung eines Textes in einer SVG // dazu IE Probleme – SELFHTML-Forum 2019-04-07T17:42:19Z https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1744275#m1744275 einsiedler 2019-03-13T00:11:24Z 2019-03-13T00:23:30Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Hallo liebe Forumer, Ich bin gerade dabei einen Text (eine Überschrift) in einer SVG vertikal zu positionieren UND, das dann im IE auch die eigentümliche Breite beibehalten wird. Mir hatte der Rolf auch schon ein wenig weitergeholfen (DANKE dafür!) ABER im IE wird diese Überschrift verkleinert und irgendwie komisch dargestellt. Nungut, jetzt habe ich von einem paddin-bottom-hack gelesen, das ich nun angewendet habe. Hier mein Quellcode:</p> <pre><code class="block language-html">`<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scaling-svg-container<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">padding-bottom</span><span class="token punctuation">:</span> 24.0385%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 50 208<span class="token punctuation">"</span></span> <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xMidYMid meet<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>verticalPath<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M37.05,208 V0<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>4</span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>4</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>42</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>200</span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ff6e00<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>104.3<span class="token punctuation">"</span></span> <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ff6e00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textpath</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#verticalPath<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Meine Überschrift<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textpath</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>` </code></pre> <p>UND mein CSS</p> <pre><code class="block language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex</span><span class="token punctuation">:</span> 0 0 3em<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 5em<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">align-content</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Variable-Bold'</span><span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.6em<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 0.6em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 6px dotted yellow<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.scaling-svg-container</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1 svg</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-height</span><span class="token punctuation">:</span> 13em<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Soweit so gut, IM IE wird die Breite JETZT genauso wie in allen anderen Browsern beibehalten/dargestellt.</p> <p>NUR was ich jetzt (im IE) komisch finde, es sieht momentan so aus: <a href="/images/905af43a-1c6b-4287-bc59-93412ad45d93.jpg" rel="noopener noreferrer"><img src="/images/905af43a-1c6b-4287-bc59-93412ad45d93.jpg?size=medium" alt="screen IE" loading="lazy"></a></p> <p>Die Überschrift wird innerhalb des Bereiches mit (orangenem) Border ab der Mitte (hier mit gelbem Strich angedeutet) nach oben hin angezeigt! WARUM bitteschön DAS DENN?? Warum wird die Überschrift nicht von ganz unten nach oben hin angezeigt? Was ist hier im Quelltext falsch? Und DAS nur im IE!</p> <p>B) In allen anderen Browsern wird die orange umrandete Überschrift jetzt nicht mehr <strong>(vertikal) Mittig</strong> (im hochkanten gelben, dotted Bereich) dargestellt, das display flex; und flex-direction: column; justify-content: center; align-content:center; , alldass funktioniert jetzt wohl nicht mehr, nehme mal an das hat mit der position: relative; / position: absolute; zu tun. Mit welcher Möglichkeit kann ich nun in (beiden) Richtungen (was halt justify-content: center; align-content:center; besorgen) diese Überschrift (mittig) positionieren? Wie macht man das nun?</p> <p>Achja: Ein Beispiel kann man hier angucken (Ich ändere hier aber die Aufteilung!)</p> <p><a href="https://www.tassilosturm.de/index_test.html" rel="nofollow noopener noreferrer">DEMO - Beispiel</a></p> <p>Und hier noch Rolfs Fiddle, der mir geholfen hat: <a href="https://jsfiddle.net/Rolf_b/25zos9c1/" rel="noopener noreferrer">Fiddle</a></p> <p>DANK, für Eure Hilfe!</p> <p>Der Misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1744743#m1744743 ThomasM 2019-03-18T14:36:54Z 2019-03-18T14:36:54Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Hallo einsiedler,</p> <blockquote> <p>Ich bin gerade dabei einen Text (eine Überschrift) in einer SVG vertikal zu positionieren UND, das dann im IE auch die eigentümliche Breite beibehalten wird.</p> </blockquote> <p>Habe es jetzt nicht weiter prüfen können, aber ändere die Element-Schreibweise von textpath -> <a href="https://developer.mozilla.org/de/docs/Web/SVG/Element/textPath" rel="nofollow noopener noreferrer">textPath</a>.</p> <p>Grüße,<br> Thomas</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1745885#m1745885 einsiedler 2019-04-02T07:14:49Z 2019-04-02T07:14:49Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Danke Dir, werde es ausprobieren.</p> <p>Gruß der misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1745888#m1745888 einsiedler 2019-04-02T07:56:34Z 2019-04-02T07:59:14Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Hallo Thomas,</p> <p>habe es ausprobiert und mein Quelltext ist:</p> <pre><code class="block language-html">`<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 50 250<span class="token punctuation">"</span></span> <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xMidYMid meet<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>verticalPath<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M40,250 V0 Z<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#verticalPath<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>125<span class="token punctuation">"</span></span> <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textpath</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#verticalPath<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Meine Überschrift<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textpath</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>4</span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>4</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>42</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>242</span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>` </code></pre> <p>Bei Opera , Chrome und im Firefox sieht es recht ordentlich aus: <a href="https://www.tassilosturm.de/test-umgebung/svg_vertikal-schrift_demo_V1.html" rel="nofollow noopener noreferrer">Test-Umgebung</a></p> <p>Nur im Edge irgendwiue befremdlich: <a href="/images/78c8508a-73b9-428b-b234-2a977050ec5c.jpg" rel="noopener noreferrer"><img src="/images/78c8508a-73b9-428b-b234-2a977050ec5c.jpg?size=medium" alt="Im Edge" loading="lazy"></a></p> <p>Woher kommt das? Was ist da noch falsch?</p> <p>MFG der misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1746372#m1746372 einsiedler 2019-04-07T17:42:19Z 2019-04-07T17:42:19Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Zuallererst, es ist möglich diesen IE Crash mithilfe von display: inline-block; zu verhindern. Ich habe das in meiner Struktur nun angewendet.</p> <p>Eine Frage, aber ist es möglich mein SCG zu skalieren, wenn zum Beispiel das Fenster nur in der Höhe zusammengestaucht wird?</p> <p>Ich habe nun folgendes: <a href="https://www.tassilosturm.de/test-umgebung/index_mitSVG_schriftzug_test.html" rel="nofollow noopener noreferrer">DEMO Website</a></p> <p>Mein svg das sich in einer <header> - Box befindet hat allerdings eine feste Höhe von 100vh um es immer mittig zu zentrieren.</p> <p>Wäre das für mich irgendwie möglich?</p> <p>der misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1745892#m1745892 ThomasM 2019-04-02T09:09:27Z 2019-04-02T09:09:27Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Hallo einsiedler,</p> <p><a href="https://www.datenverdrahten.de/svglbc/?doc=textPath&znr=on" rel="nofollow noopener noreferrer">textPath</a> sollte auch im IE grundsätzlich funktionieren.</p> <p>Ich würde hier eher den Text rotieren, wenn es SVG sein soll:</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span> <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>36<span class="token punctuation">"</span></span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rotate(-90,40,150)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Meine Überschrift<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> </code></pre> <p>Grüße,<br> Thomas</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1745898#m1745898 einsiedler 2019-04-02T12:16:09Z 2019-04-02T12:18:52Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Ist ja ganz hübsch.</p> <p>Aber eine nachfrage, wie ist es damit ob alle Browser auch transform-rotate kennen? Wie sieht es da aus?</p> <p>Habe nun folgendes:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 50 250<span class="token punctuation">"</span></span> <span class="token attr-name">preserveAspectRatio</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xMidYMid meet<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>42<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>242<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rect</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>148<span class="token punctuation">"</span></span> <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>35<span class="token punctuation">"</span></span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rotate(-90,40,150)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tassilo Sturm<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> </code></pre> <p>Chrome , opera und Firefox machens obwohl die Schriftgröße unterschiedlich ist, aber egal.</p> <p>Im edge und 10er machens, aber bei edge muss man einmal auf den Schriftzug klicken dann erscheint er erst, weiß nicht was das wieder ist.</p> <p><a href="https://www.tassilosturm.de/test-umgebung/svg_vertikal-schrift_demo_V2.html" rel="nofollow noopener noreferrer">Link zur Demoversion in der Test-Umgebung</a></p> <p>Im 10er macht er es auch, den 9er kann man glaub ich vernachläßigen, oder? Ansonsten könnte der Schriftzug hier in den Fall horizontal erscheinen oder gibt es da auch ein -ms-transform ?</p> <p>Hmmmmmm.... aber Danke!</p> <p>der misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1745927#m1745927 einsiedler 2019-04-02T23:07:53Z 2019-04-02T23:08:08Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Also das mit der Schriftgröße hat sich von selbst gelöst, <em>g</em> öfters mal das cache leeren.</p> <p>Nur das halt im Edge ein leeres Feld angezeigt wird wenn man mit dem cursor kurz darauf tippt (wo eigentlich der schriftzug ist) dann wird er sichtbar, sehr seltsam das. Muss ich das jetzt akzeptieren?</p> <p>Nunja, gute n8</p> <p>der misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1746050#m1746050 ThomasM 2019-04-04T06:53:29Z 2019-04-04T06:53:29Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Hallo einsiedler,</p> <blockquote> <p>Nur das halt im Edge ein leeres Feld angezeigt wird wenn man mit dem cursor kurz darauf tippt (wo eigentlich der schriftzug ist) dann wird er sichtbar, sehr seltsam das. Muss ich das jetzt akzeptieren?</p> </blockquote> <p>Da beißt sich irgendwie etwas mit dem Flex-Gedöns. ;)</p> <p>Grüße,<br> Thomas</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1746113#m1746113 einsiedler 2019-04-04T11:30:01Z 2019-04-04T11:30:01Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Und was mach ich dagegen? Altmodisch eine Tabelle nehmen? Gruß der misanthrop</p> https://forum.selfhtml.org/self/2019/mar/13/positionierung-eines-textes-in-einer-svg-strich-strich-dazu-ie-probleme/1746134#m1746134 einsiedler 2019-04-04T18:16:46Z 2019-04-04T18:17:46Z Positionierung eines Textes in einer SVG // dazu IE Probleme <p>Inzwischen habe ich folgendes herausgefunden:</p> <p>https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10691117/</p> <p>Dort hatte Shashank H. folgendes gepostet:</p> <p>Workarounds</p> <p>Some solutions I found online were that I set svg elements to do svg {position: absolute}</p> <p>I’ve also figured out that setting the wrapper element as inline-block also prevents the crash .svg-wrapper {display: inline-block}</p> <p>Bitte hilf mir wie das nun in meinem Fall aussähe, wo müsste im Fall a) position absolute gesetzt werden , aber dann müsste doch auch irgendwo vorher position relative gesetzt werden. Wie sähe soetwas aus.</p> <p>im Fall b) Wie bringe ich nun einen wrapper mit {display: inline-block} ins Spiel. Wie sähe das aus.</p> <p>bitte unterstütze mich.</p> <p>MFG der misanthrop</p>