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.

HTML in SVG[Bearbeiten]

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>

foreignObject[Bearbeiten]

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.

mehrzeiliger Text in SVG 2[Bearbeiten]

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!

inline-size[Bearbeiten]

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.

shape-inside[Bearbeiten]

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

shape-outside[Bearbeiten]

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

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

Text mit mehreren tspan-Elementen[Bearbeiten]

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.

Weblinks[Bearbeiten]