CSS in SVG verwenden

(Weitergeleitet von Hilfe:CSS in SVG verwenden)
Zur Navigation springen Zur Suche springen

Folgende CSS-Eigenschaften können in SVG verwendet werden:

CSS-Eigenschaften

fill fill-opacity fill-rule marker marker-start marker-mid marker-end stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-miterlimit stroke-opacity stroke-width text-rendering

Text-Eigenschaften

alignment-baseline baseline-shift dominant-baseline glyph-orientation-horizontal glyph-orientation-vertical kerning

Gradient-Eigenschaften

stop-color stop-opacity

Codebeispiel

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" viewBox="-150 -150 300 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <style type="text/css">
    .nr1 {stroke: black;
                stroke-width: 5px;
                stroke-opacity: 0.5}
    .nr2 {stroke: white;
                stroke-width: 5px;
                stroke-opacity: 0.5}
  </style>
</defs>

<circle r="150" fill="yellow" />
<circle class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />
</svg>