Beschreibung

BeschreibungTest only.svg	Test image applying style sheets (checks libsvg rendering). All items should look the same. View source for what works and what doesn't.
Datum	August 2007
Quelle	Eigenes Werk
Urheber	H2g2bob
SVG‑Erstellung InfoField	Der SVG-Code ist valide.   Diese Vektorgrafik wurde mit Inkscape erstellt.    Diese Datei verwendet Text-Einbettung, die mit einem Texteditor leicht übersetzbar ist. This SVG picture shows a librsvg bug.Bug replaced description: CSS child selectors are not supported:[1] bugzilla:41423   Eine Rastergrafik-Version dieses Bildes liegt vor. Diese sollte verwendet werden, weil sie eine bessere Qualität aufweist. File:Test only.svg → File:Test only RenderedByInkscape.png Weitere Informationen über Bildformate gibt es u.a. auf Commons:Dateitypen. العربية ∙ Boarisch ∙ বাংলা ∙ čeština ∙ Deutsch ∙ English ∙ Esperanto ∙ español ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ hrvatski ∙ Bahasa Indonesia ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ മലയാളം ∙ Plattdüütsch ∙ Nederlands ∙ polski ∙ português ∙ русский ∙ sicilianu ∙ slovenščina ∙ svenska ∙ Türkçe ∙ українська ∙ Tiếng Việt ∙ 中文（简体）‎ ∙ 中文（繁體）‎ ∙ +/−

Entschuldigung, diese Grafik dient ausschließlich der Weiterverwendung und Weiterbearbeitung. Bitte nicht direkt in Artikeln verwenden! MediaWiki kann diese Grafik nicht korrekt rendern. Manche Details können fehlen oder fehlerhaft aussehen. Wenn du dieses Bild in einer Wikipedia (oder einem anderen Wikimediaprojekt) verwendest, möchtest du vielleicht die andere Datei verwenden bis die Unterstützung verbessert wurde. File:Test only.svg File:Test only withoutCSS HowItShouldLookLike.svg Deutsch ∙ English ∙ español ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ 简体中文 ∙ 繁體中文 ∙ +/−

 

This SVG picture shows a librsvg bug.Bug replaced description: CSS child selectors are not supported:[2] bugzilla:41423

Lizenz

Ich, der Urheberrechtsinhaber dieses Werkes, veröffentliche es als gemeinfrei. Dies gilt weltweit. In manchen Staaten könnte dies rechtlich nicht möglich sein. Sofern dies der Fall ist: Ich gewähre jedem das bedingungslose Recht, dieses Werk für jedweden Zweck zu nutzen, es sei denn, Bedingungen sind gesetzlich erforderlich.

Tests

1 - Apply style directly

This method always works, and is the type automatically generated, eg: by Inkscape. Path is the circle, rect is the square.

<g>
   <path style="stroke-width: 2; fill: red;">
   <rect style="stroke-width: 2; fill: blue;">

2 - Applying style to path and rect using a stylesheet

Uses the svg:style element to define style rules, as in a CSS stylesheet. Applies a "shape_direct" class to both shapes, and applied "square" class to the square to make it blue. "square" class uses !important to override shape_direct's red color.

<style>
   .shape_direct {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
<g>
   <path class="shape_direct">
   <rect class="shape_direct square">

3 - Style rules on inherited style classes

Same as 2, but replaces "shape_direct" class with the two classes "shape_under_group" and "group" as descendant-selectors.

<style>
   .group .shape_under_group {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
<g class="group">
   <path class="shape_under_group">
   <rect class="shape_under_group square">

4 - Style rules on inherited style classes

Same as 3, but replaces "square" class with a rule looking for an item with the id "square_id" under any object of "group" class.

<style>
   .group .shape_under_group {
      stroke-width: 2;
      fill: red; }
   .group #square_id {
      fill: blue; }
<g class="group">
   <path class="shape_under_group">
   <rect class="shape_under_group" id="square_id">

5 - Style rules applied to higher-level elements

Tests inheritance of style rules. In firefox and inkscape, applying a style to an element then applies that style to all child elements; others may apply default style sheets.

<style>
   .shape_direct {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
<g class="group">
   <path>
   <rect class="square">

6 - Force inherit

Same as 5, but explicitly requests inheritance.

<style>
   .shape_direct {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
   .force_inherit {
      fill:             inherit;
      stroke:           inherit;
      stroke-width:     inherit;
      opacity:          inherit;
      fill-opacity:     inherit; }
<g class="group">
   <path class="force_inherit">
   <rect class="force_inherit square">