SVG/SVG und CSS

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

Einer der großen Vorteile von SVG gegenüber zum Beispiel canvas ist die Möglichkeit SVG-Objekte mit CSS zu formatieren.[1]

Anders als bei HTML, wo die Trennung zwischen Inhalt und Design (mittels CSS) schon lange akzeptiert ist, wurde das Aussehen von SVG-Elementen ursprünglich durch ihre XML-Attribute festgelegt. Viele davon sind Präsentationsattribute, die Sie auch über CSS notieren können.

Dabei gibt es verschiedene Möglichkeiten:

Inhaltsverzeichnis

[Bearbeiten] Einbindung von Stilangaben

[Bearbeiten] Inline-CSS

Beispiel
<circle
  cx="50"
  cy="50"
  r="50" 
  fill="#dfac20"
  stroke="#3983ab"
  stroke-width="2" 
/>
<circle 
 cx="50" 
 cy="50"
 r="50"
 style="fill:#dfac20;stroke:#3983ab;stroke-width:2"
/>

Im ersten Beispiel sind alle Angaben als XML-Attribute deklariert. Dabei wurde nicht zwischen Objekt- und Stileigenschaften unterschieden, während im zweiten Beispiel alle Stileigenschaften als Inline-CSS zusammengefasst wurden.[2]

Beachten Sie: Inline-CSS-Code überschreibt zuvor geladene CSS-Formatierungen im head oder von externen Stylesheets.

[Bearbeiten] Einbindung in die SVG-Grafik

Die CSS-Anweisungen können mit einem style-Element direkt in die SVG-Grafik eingebunden werden.

Beispiel
<svg>
  <defs>
    <style type="text/css">
      <![CDATA[
        circle {
          fill: #dfac20;
          stroke: #3983ab;
          stroke-width: 2;
        }
      ]]>
    </style>
  </defs>
</svg>
Beachten Sie: Da in CSS-Angaben anders als in XML-Dokumenten ein > vorkommen darf (z.B. beim Kindselktor E > F, sollten die Stil-Definitionen in CDATA gekapselt werden.

[Bearbeiten] Einbindung externer Stylesheets

Weiterhin können Sie externe Stylesheets in HTML-Seiten und XML-Dokumente einbinden.

Beispiel: Einbindung eines XML-Stylesheets
<?xml version="1.0" standalone="no"?>
 
<?xml-stylesheet href="style.css" type="text/css"?>
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 
</svg>

[Bearbeiten] SVG und die CSS-Kaskade

Wie oben schon erwähnt, überschreiben inline-CSS-Angaben Einstellungen aus externen Stylesheets oder aus dem style-Bereich. Dies enspricht der Spezifität des style-Attributs in HTML.

Inline-Styles werden aufgrund der höheren Spezifität nur durch !important überschrieben.

Während es ziemlich einfach ist, XML-Attribute durch CSS zu überschreiben, benötigen Sie bei Inline-Styles das Schlüsselwort !important.

Auch wenn es scheint, als ob XML-Attribute nun gar nicht mehr verwendet werden müssen, kann es doch empfehlenswert sein, diese zu setzen, um einen FOUSVG (‘Flash Of Unstyled SVG’) zu vermeiden.[3][4][5]

[Bearbeiten] Möglichkeiten und Grenzen

Eigentlich sollten gerade die Präsentationsattribute, die ja Elemente formatieren und die Darstellung festlegen, in einen externen CSS-Bereich ausgelagert werden, um so durch Klassen eine Vielzahl von Objekten zentral zu formatieren.

Andererseits ist z.B. das path-Element eben doch kein immer gleich aussehendes Objekt, sondern eine Möglichkeit eine Vielzahl von verschiedenen Objekten zu erzeugen. Deshalb wäre es nicht zielführend das d-Attribut mit den Pfadangaben ins CSS auszulagern.

Hier gilt es abzuwägen, wie oft ein Attribut wiederverwendet werden soll. Will man einheitliche Linien bei mehreren Elementen, ist eine Festlegung im Stylesheet oder zumindest im oberen style-Abschnitt zu empfehlen.

Festlegungen, die nur einmal getroffen werden, können als XML-Attribut oder innerhalb eines style-Attributs ihren Platz finden.

[Bearbeiten] SVG und CSS-Selektoren

Um SVG-Elemente auszuwählen, können Sie fast alle Selektoren wie dynamische Pseudoklassen :hover, :active und :focus und strukturelle Pseudoklassen wie first- und last-child verwenden.

Sie können SVG-Elemente mit Selektoren identifizieren und dafür CSS-Regeln festlegen.

Beispiel ansehen …
circle {
  transition: all 0.5s ease-out;
}
#eins {
  fill: #c32e04;	
}
 
svg:hover #eins,
svg:focus #eins {
  fill: #dfac20;
}
 
#zwei {
  fill: #c32e04;	
  stroke: #c32e04;
  stroke-width: 0;
  }
 
svg:hover #zwei,
svg:focus #zwei {
  stroke-width: 100px;
  }
In diesem Beispiel ändern die Kreise bei :hover ihre Eigenschaften. Der linke Kreis erhält über die Eigenschaft fill eine andere Füllfarbe.

Der mittlere Kreis erhält bei :hover mit der Eigenschaft stroke einen Rand. Da der Rand genau auf der Grenze liegt, teilt sich der Rand von 100px so auf, dass er 50px innerhalb des Kreises und 50px außerhalb des Kreises liegt und so den Radius von 50px scheinbar verdoppelt.

Die im Beispiel verwendete Selektion der Pseudoklasse :focus ist noch nicht möglich, da das im Beispiel verwendete tabindex="0" bei SVG-Elementen noch in keinem Browser funktioniert. Wenn Sie die Kreise mit der Tastatur bedienen wollten, müssten Sie sie in einem a-Element verschachteln.


Beachten Sie: Präsentationsattribute vs. Größenangeben
Auch wenn es anders aussieht, bleibt die Größe des mittleren Kreises unverändert. Ein Ansprechen von Größenangaben wie x, y, height, width usw. wird erst mit SVG2 möglich sein.
Beachten Sie: In Chrome und Opera funktionieren Pseudoklassen wie :hover und :focus beim Aufrufen mit use-Elementen nicht. Verschieben Sie die Kindelemente in das zu animierende Objekt.

Siehe auch:

[Bearbeiten] SVG und Pseudoelemente

Nur der Einsatz von Pseudolementen wie :after und :before ist nicht möglich, da sie in SVG nicht definiert sind. Die Spezifikation ist nicht ganz eindeutig, aber anscheinend werden SVG-Elemente als Grafik wie ein img behandelt, die keine Pseudoelemente erlauben.[6]

[Bearbeiten] IE-Bug: Ansprechen von Kindelementen

Beispiel ansehen …
path {
  fill: none;
  stroke: #3983ab;
  stroke-width: 2px;
  }
text {
  font-size:12px;
  }
marker, marker path {
  fill: #dfac20;
  stroke: #000;
  stroke-width:1px;
}
Im vorliegenden Beispiel sollten die marker-Symbole eine gelbe Füllung und einen 1 Pixel breiten schwarzen Rand erhalten. Um dies auch für das path-Element zu erreichen wurde neben der Festlegung von path noch eine genauere für alle path-Elemente, die Kinder von marker sind, getroffen. Dies funktioniert in allen Browsern außer dem Internet Explorer, der den letzten marker im Stil eines normalen Pfades mit 2 Pixel breitem blauem Rand anzeigt.
Empfehlung: Weisen Sie jedem Element eine id oder Klasse zu, deren Darstellung Sie dann per CSS festlegen.

[Bearbeiten] Präsentationsattribute in SVG 2

Ursprünglich wurde das Aussehen von SVG-Elementen durch ihre XML-Attribute festgelegt. Präsentationsattribute konnte man auch über CSS notieren. SVG 2 bringt hier neben der Integration von SVG in HTML5 eine weitere Verknüpfung mit CSS - auch Abmessungen (width, height) und Positionsangaben (x, y bzw. r, cx, cy, rx, ry) können nun ebenfalls mit CSS festgelegt und dadurch z.B. durch hover verändert werden.[7]

  • SVG 2
  • Chrome
  • Leer
  • Leer
  • Opera
  • Safari
Beispiel: Abmessungen als Präsentationsattribute ansehen …
<defs>
<style>
#quadrat {
  fill: #dfac20;
  height:50px;
  width:50px;
}
 
#quadrat:hover {
  fill:#c32e04;
  height:40px;
  width:40px;  
  x: 20px;
 
}
#kreis1{
  cx: 100px;
  cy: 100px;
  r:  30px;
  fill:#dfac20;
}
#kreis1:hover {
  r:50px;
  fill: #c32e04;
}
</style>
</defs>
  <circle id="kreis1" />
  <rect id="quadrat" />
In den Webkit-Browsern verändern sich die CSS-Festlegungen beim Darüberfahren mit der Maus. In Firefox und IE werden die Objekte nicht gerendert, da diese noch XML-Attribute benötigen.

[Bearbeiten] Quellen

  1. W3C: SVG Styling
  2. tutorials.jenkow: SVG and CSS
  3. css-tricks: Presentation Attributes vs Inline Styles Chris Coyier (23.12.2016)
  4. Sara Soueidan: SVG Style Inheritance and the ‘Flash Of Unstyled SVG’ (01.03.2016)
  5. wikibooks.de: CSS: Kaskadierung, Spezifität und Vererbung: Präsentationsattribute
  6. stackoverflow: css-before-on-inline-svg
  7. Dirk Schulze auf Twitter: x, y, width and height are #SVG "presentation attributes" in @webkit now.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML