tag:forum.selfhtml.org,2005:/self Text umrahmen in SVG – SELFHTML-Forum 2020-06-24T16:05:57Z https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772005#m1772005 A-S 2020-06-13T13:20:05Z 2020-06-13T13:20:05Z Text umrahmen in SVG <p>Hallo. Wie kann ich in einer SVG ein Rechteck um einen ganzen Text erstellen, wenn ich wegen variabler schrift nicht genau weis, wie breit er beim Betrachter wird? Ich bräuchte also eine Breite, welche sich an den Inhalt anpasst.</p> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772009#m1772009 Matthias Scharwies mscharwies@selfhtml.org 2020-06-13T13:53:03Z 2020-06-13T13:55:05Z Text umrahmen in SVG <p>Hallo A-S! Herzlich willkommen bei SELFHTML!</p> <blockquote> <p>Hallo. Wie kann ich in einer SVG ein Rechteck um einen ganzen Text erstellen, wenn ich wegen variabler schrift nicht genau weis, wie breit er beim Betrachter wird? Ich bräuchte also eine Breite, welche sich an den Inhalt anpasst.</p> </blockquote> <p>Das ist genau das Problem und der Unterschied zu HTML.</p> <p>In <strong>HTML</strong> bilden alle Elemente Blöcke mit einer Breite und Höhe. So kannst Du Text eine Farbe, aber auch eine Hintergrundfarbe oder einen Rand geben.</p> <p>In <strong>SVG</strong> besteht der Text nur aus den Zeichen oder Glyphen, denen du eine Füllung (fill) oder Randlinie (stroke) geben kannst. Der „Hintergrund“ existiert nicht, kann aber durch ein rect, das vorher (es gibt ja (noch) keinen z-index bei SVG) gezeichnet wird, mit Hintergrund und Rahmen um den Text gestaltet werden.</p> <p>Die Dimensionen müsstest du entweder ausprobieren oder mit Javascript berechnen.</p> <p><strong>[EDIT]</strong> Hier bei SO gefunden: <a href="https://stackoverflow.com/questions/1636842/svg-get-text-element-width" rel="noopener noreferrer">svg-get-text-element-width</a> <strong>[/EDIT]</strong></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ήταν διασκεδαστικό όσο κράτησε.<br> Χρύσιππος ὁ Σολεύς, 220 π.Χ. </div> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772035#m1772035 ThomasM 2020-06-13T16:24:32Z 2020-06-13T16:24:32Z Text umrahmen in SVG <p>Hallo A-S,</p> <blockquote> <p>Hallo. Wie kann ich in einer SVG ein Rechteck um einen ganzen Text erstellen, wenn ich wegen variabler schrift nicht genau weis, wie breit er beim Betrachter wird? Ich bräuchte also eine Breite, welche sich an den Inhalt anpasst.</p> </blockquote> <p>Wenn JavaScript eine Option ist, dann lässt sich mittels getComputedTextLength() die Textbreite ermitteln und dann auf das Rechteck anwenden, etwa mit diesem Ansatz:</p> <pre><code class="block language-html"><span class="token prolog"><?xml version="1.0" encoding="UTF-8"?></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</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>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"DOMContentLoaded"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> textobj <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"txt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> textbreite <span class="token operator">=</span> textobj<span class="token punctuation">.</span><span class="token function">getComputedTextLength</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> texthoehe <span class="token operator">=</span> textobj<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"font-size"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> rectobj <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElementNS</span><span class="token punctuation">(</span><span class="token string">"http://www.w3.org/2000/svg"</span><span class="token punctuation">,</span> <span class="token string">"rect"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"x"</span><span class="token punctuation">,</span> textobj<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"x"</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"y"</span><span class="token punctuation">,</span> textobj<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"y"</span><span class="token punctuation">)</span> <span class="token operator">-</span> texthoehe<span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"height"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">1.2</span> <span class="token operator">*</span> texthoehe<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"width"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">1.05</span> <span class="token operator">*</span> textbreite<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"stroke"</span><span class="token punctuation">,</span> <span class="token string">"#F00"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"fill"</span><span class="token punctuation">,</span> <span class="token string">"none"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>rectobj<span class="token punctuation">,</span> textobj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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>text</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>txt<span class="token punctuation">"</span></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>20<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>40<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>24<span class="token punctuation">"</span></span> <span class="token attr-name">font-family</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sans-serif<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Das ist der Text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Ergebnis: <rect x="15" y="16" height="28.8" width="180.7" stroke="#F00" fill="none"/> --></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/2020/jun/13/text-umrahmen-in-svg/1772055#m1772055 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-06-13T17:57:44Z 2020-06-13T17:57:44Z Text umrahmen in SVG <p>@@ThomasM</p> <blockquote> <pre><code class="block language-js">rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"height"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">1.2</span> <span class="token operator">*</span> texthoehe<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"width"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">1.05</span> <span class="token operator">*</span> textbreite<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Wo kommen die <em lang="en">magic numbers</em> her?</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772546#m1772546 Matthias Scharwies mscharwies@selfhtml.org 2020-06-24T14:01:45Z 2020-06-24T14:05:39Z Text umrahmen in SVG <p>Servur!</p> <p>@Thomas Vielen Dank, ich hab's so ähnlich mal ins Wiki eingefügt:</p> <p><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/mehrzeiliger_Text#Rahmen_um_Text_erzeugen" rel="nofollow noopener noreferrer">SVG/Tutorials/Text/mehrzeiliger_Text#Rahmen_um_Text_erzeugen</a></p> <p>Die Erklärung folgt noch!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ήταν διασκεδαστικό όσο κράτησε.<br> Χρύσιππος ὁ Σολεύς, 220 π.Χ. </div> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772552#m1772552 Rolf B 2020-06-24T15:04:16Z 2020-06-24T15:04:16Z Text umrahmen in SVG <p>Hallo ThomasM,</p> <p>ich bin ja nicht so der SVG Spezi, darum sind das vielleicht dumme Fragen:</p> <ul> <li><script> in SVG? ECHT? Ich lade mir ggf. Script in die Seite, wenn ich von irgendwo ein SVG einbinde? Ich hab Angst! Oder sind DOM Zugriffe dieses Scripts auf die Inhalte des SVG gesandboxt? Die Spec schreibt: <em>Any functions defined within any ‘script’ element have a "global" scope across the entire current document.</em> - aber was ist für die Spec das Document?</li> <li>Damit hängt der Scope der txt Id zusammen. Was ist, wenn ich dieses SVG zweimal auf die Seite lade, kollidieren die beiden IDs dann?</li> <li>SVG ist XML, muss das Script da nicht in CDATA Kommentare eingeschlossen werden, so wie z.B. <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script" rel="nofollow noopener noreferrer">hier</a>? Ok, die "bösen" Zeichen < > und & tauchen hier nicht auf, aber besser ist's wohl, oder?</li> <li>Funktioniert das bei inline svg und einem als Image geladenen SVG gleichermaßen oder muss man da unterscheiden? Insbesondere bei der Frage: „Was ist das Document?“</li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772058#m1772058 ThomasM 2020-06-13T18:16:08Z 2020-06-13T18:16:08Z Text umrahmen in SVG <p>Hallo Gunnar,</p> <blockquote> <blockquote> <pre><code class="block language-js">rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"height"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">1.2</span> <span class="token operator">*</span> texthoehe<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> rectobj<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"width"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">1.05</span> <span class="token operator">*</span> textbreite<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Wo kommen die <em lang="en">magic numbers</em> her?</p> </blockquote> <p>Habe ich etwas experimentell mit einigen Schriftgrößen probiert. Kann man natürlich auch nach Belieben ändern oder anders bauen.</p> <p>Grüße,<br> Thomas</p> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772553#m1772553 Matthias Scharwies mscharwies@selfhtml.org 2020-06-24T15:20:36Z 2020-06-24T18:09:59Z Text umrahmen in SVG <p>Servus!</p> <blockquote> <p>Hallo ThomasM,</p> <p>ich bin ja nicht so der SVG Spezi, darum sind das vielleicht dumme Fragen:</p> <ul> <li><script> in SVG? ECHT? Ich lade mir ggf. Script in die Seite, wenn ich von irgendwo ein SVG einbinde? Ich hab Angst! Oder sind DOM Zugriffe dieses Scripts auf die Inhalte des SVG gesandboxt? Die Spec schreibt: <em>Any functions defined within any ‘script’ element have a "global" scope across the entire current document.</em> - aber was ist für die Spec das Document?</li> </ul> </blockquote> <p>Nein, nur unter gewissen Umständen (mehr hier: <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/SVG_und_JavaScript" rel="nofollow noopener noreferrer">SVG/Tutorials/SVG_und_JavaScript</a>) Nur kurz: ein img darf kein script ausführen. Trotzdem haben aus diesem Grund viele CMS den Einsatz von SVG „verboten“. (Oder ein Plugin „reinigt“ das SVG von Scripten und externen Links auf weitere Seiten, die wieder andere Scripte aufrufen.)</p> <p>Viele alte Beispiele waren und sind Standalone-SVGs. Heute, da man SVGs ohne Plugin darstellen kann, würde ich nur noch inline-SVG verwenden (und evtl. dynamisch erzeugen). Ausnahme sind Logos, die ich als img einbinden würde.</p> <p>Auch im Wiki sind unsere Beispiele SVGs in HTML-Dokumenten.</p> <blockquote> <ul> <li>SVG ist XML, muss das Script da nicht in CDATA Kommentare eingeschlossen werden, so wie z.B. <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script" rel="nofollow noopener noreferrer">hier</a>? Ok, die "bösen" Zeichen < > und & tauchen hier nicht auf, aber besser ist's wohl, oder?</li> </ul> </blockquote> <p>Ja! Besser ist es imho aber die Zuständigkeiten zu trennen und das script-Element nicht irgendwo, sondern im Head oder am Ende des body-Elements zu notieren.</p> <blockquote> <ul> <li>Funktioniert das bei inline svg und einem als Image geladenen SVG gleichermaßen oder muss man da unterscheiden? Insbesondere bei der Frage: „Was ist das Document?“</li> </ul> </blockquote> <p>siehe oben. Wenn der Wiki-Artikel nicht ausreichend ist, bitte erweitern!</p> <p><strong>[EDIT]</strong> Eine Übersicht über die möglichen Einbindung(en) von SVG (und was dann jeweils möglich ist) findet sich hier:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Einbindung" rel="nofollow noopener noreferrer">SVG/Tutorials/Einstieg/Einbindung</a></li> </ul> <p><strong>[/EDIT]</strong></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ήταν διασκεδαστικό όσο κράτησε.<br> Χρύσιππος ὁ Σολεύς, 220 π.Χ. </div> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772556#m1772556 ThomasM 2020-06-24T15:40:19Z 2020-06-24T15:40:19Z Text umrahmen in SVG <p>Hallo Rolf,</p> <blockquote> <ul> <li>SVG ist XML, muss das Script da nicht in CDATA Kommentare eingeschlossen werden, so wie z.B. <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script" rel="nofollow noopener noreferrer">hier</a>? Ok, die "bösen" Zeichen < > und & tauchen hier nicht auf, aber besser ist's wohl, oder?</li> </ul> </blockquote> <p>Ja, für die Nutzung der Zeichen < bzw. & ist das sinnvoll. > ist ja in XML nur kritisch, wenn der CDATA-Schließer ]]> selbst in einem CDATA-Abschnitt auftaucht, dann ]]&gt; nötig.</p> <p>Für größere Projekte bietet sich natürlich die Auslagerung von JS an.</p> <p>Scripting in SVG ist an sich ein alter Hut. Mein erstes <a href="https://www.datenverdrahten.de/svglbc/svg/TMs10kSVGDemo.htm" rel="nofollow noopener noreferrer">SVG-Erklärdokument</a> von 2002 nutzt bereits JS, um via mouseover unten den relevanten Code einzublenden.</p> <p>Grüße,<br> Thomas</p> https://forum.selfhtml.org/self/2020/jun/13/text-umrahmen-in-svg/1772561#m1772561 ThomasM 2020-06-24T16:05:57Z 2020-06-24T16:05:57Z Text umrahmen in SVG <p>Hallo Matthias,</p> <blockquote> <p>Viele alte Beispiele waren und sind Standalone-SVGs. Heute, da man SVGs ohne Plugin darstellen kann, würde ich nur noch inline-SVG verwenden (und evtl. dynmisch erzeugen). Ausnahme sind Logos, die ich als img einbinden würde.</p> </blockquote> <p>Es bietet sich auch weiterhin object für die SVG-Einbindung an.</p> <p>Über die HTML-/SVG-Schnittstelle kommt man dann von außen im JS des HTML-Dokuments an die SVG-Inhalte heran:</p> <pre><code class="block language-javascript"><span class="token comment">// object-Element mit id="grafik" im HTML</span> grafik <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"grafik"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// document-Objekt der eingebundenen Grafik</span> svgdoc <span class="token operator">=</span> grafik<span class="token punctuation">.</span>contentDocument<span class="token punctuation">;</span> </code></pre> <p>Grüße,<br> Thomas</p>