SVG/Anwendung und Praxis/mehrzeiliger Text

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Eines der großen Mankos von SVG ist die Tatsache, dass Sie längere Texte nicht einfach so notieren können, dass er sich mehrzeilig auf den verfügbaren Platz aufteilt.

Inhaltsverzeichnis

[Bearbeiten] HTML in SVG

Leider ist es nicht möglich HTML-Elemente direkt in SVG einzubinden. Mit HTML5 wurde es zwar möglich, dass HTML-Browser auch SVG parsen - bei HTML innerhalb von SVG ist dies aber (noch) nicht der Fall.

Beispiel: So wäre es am einfachsten:
<rect x="10" y="10" width="200" height="150" fill="#5a9905">
  <h2>Überschrift</h2>
  <p>Dies ist ein Textabsatz mit einem <strong>fetten</strong> Wort und automatischem Zeilenumbruch.</p>
</rect>

[Bearbeiten] foreignObject

Mit dem foreignObject-Element können Sie jedoch SVG durch andere XML-Formate, unter anderem auch XHTML, erweitern.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Beispiel ansehen …
<rect x="10" y="10" width="200" height="150" fill="#5a9905"/>
  <foreignobject x="20" y="10" width="180" height="150">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <h2>Überschrift</h2>
      <p>
        Dies ist ein Textabsatz mit einem <strong>fetten</strong> Wort und automatischem Zeilenumbruch.
      </p>
    </body>
  </foreignobject>
 
<circle cx="300" cy="200" r="100" fill="#dfac20"/>
 <foreignobject x="230" y="120" width="180" height="180">
   <h2>Überschrift</h2>
   <ol>
     <li>Listenelement</li>
     <li>Listenelement</li>
     <li>Listenelement</li>
   </ol>
  </foreignobject>
Wie Sie sehen, hat das zweite foreignObject weder ein requiredExtensions-Attribut noch einen Namensraum.
Wenn Sie SVG in Webseiten mit HTML5-Doctype einbetten, benötigen Sie keine Namensraumdeklaration für die SVG- und die foreignObject-Elemente mehr.

[Bearbeiten] mehrzeiliger Text in SVG 2

In SVG 2 erhalten text-Elemente einen Inhaltsbereich (content-area), der mit Breitenangaben oder Formen gestaltet werden kann. Das text-Element gilt als Block-Element, evtl. darin enthaltene Elemente wie tspan und textPath gelten als inline-Elemente.

Hinweis

Diese Eigenschaften sind neu in SVG2. Sie werden von Browsern noch nicht unterstützt!

[Bearbeiten] inline-size

Die inline-size-Eigenschaft ermöglicht es, Breitenangaben für text festzulegen.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Folgende Werte sind möglich:

Falls kein Wert angegeben wird, gilt es als nicht festgelegt und wird theoretisch unendlich groß, d.h. faktisch nimmt es die Länge des Textes ein.


Beispiel ansehen …
<rect x="10" y="10" width="200" height="150" fill="#5a9905"/>
  <text x="20" y="10" inline-size="180" role="heading">
    Überschrift
  </text>
  <text x="20" y="60" inline-size="180" >
    Dies ist ein Textabsatz mit einem 
    <tspan class="strong">fetten</tspan> 
    Wort und automatischem Zeilenumbruch.
  </text>
In diesem Beispiel besteht der Text aus zwei Text-Elementen mit einer Breite von 180 Pixel.
Die Überschrift erhält ein role-Attribut mit dem Wert heading - das Aussehen wird mit CSS festgelegt.
Gleiches gilt für den Text, der sich nun automatisch an die festgelegte Breite anpasst und entsprechend umbricht.

[Bearbeiten] shape-inside

Die shape-inside-Eigenschaft ermöglicht es, den Inhaltsbereich auf eine CSS-Form (shape) oder eine SVG-Grundform anzuwenden.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Beispiel für text-wrap, Quelle: W3C

[Bearbeiten] shape-outside

Die shape-outside-Eigenschaft definiert ein Element, um das Text herumgeführt wird.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

[Bearbeiten] Text mit mehreren tspan-Elementen

Bis dahin bleibt keine andere Möglichkeit als jede vorgesehene Textzeile in ein eigenes tspan-Element zu packen.

Beispiel ansehen …
<rect x="10" y="10" width="200" height="150" fill="#5a9905"/>
<text x="20" y="40" role="heading">
  Überschrift
</text>
 
<text x="20" y="60">
  Dies ist ein Textabsatz 
  <tspan x="20" y="80" >
    mit einem 
    <tspan class="strong">fetten</tspan> 
    Wort
  </tspan>
  <tspan x="20" y="100"> und automatischem</tspan>
  <tspan x="20" y="120">Zeilenumbruch.</tspan>
</text>
Jede Zeile des Texts wird von einem eigenen tspan-Element umschlossen und absolut positioniert.
text {
  font-size: 16px;	
}  
 
text[role=heading] {
  font-size: 24px;
  font-weight: bold; 
}  
 
.strong {
  font-weight: bold; 
}
Die Überschrift erhält ein role-Attribut heading und wird entsprechend mit CSS gestylt.
Auch die Klasse strong erhält ihr Aussehen über eine CSS-Festlegung.

Nachteile dieser Methode sind …

  • der aufgeblähte Markup durch die zusätzlichen tspan-Elemente
  • keine Möglichkeit prozentuale Breitenangaben zu verwenden.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML