Donner SVG Editor & Engine
SVG-native editor and embeddable SVG2 + CSS3 engine in C++20, with GPU (WebGPU) and compact CPU renderers, built for correctness, security, and performance.
Loading...
Searching...
No Matches
<style>

Defines a CSS stylesheet for the document.

Multiple <style> elements may be defined in a single document, and the aggregate document style is computed from that using CSS cascading rules.

Stylesheets support CSS Level 3: https://www.w3.org/TR/css-syntax-3/

The <style> element is SVG's native way to embed a CSS stylesheet directly in the document

  • the exact counterpart of HTML's <style> tag. Rules inside it use normal CSS selectors (by element name, class, id, attribute, pseudo-class, and so on) and can set any SVG presentation property: fill, stroke, stroke-width, opacity, font-family, transform, and the rest. A single document may contain multiple <style> elements; the browser combines them with the regular CSS cascade, so later rules and more specific selectors override earlier ones just as they do in HTML.

Use <style> to share visual properties across many shapes, apply hover or animation effects, or keep presentation separate from structure. For one-off styling, the inline style="..." attribute on an individual element is usually simpler.

<style>   .rect {     fill: crimson;     stroke: darkred;   }   .circle:nth-child(3n+1) { fill: red; }   .circle:nth-child(3n+2) { fill: limegreen; }   .circle:nth-child(3n+3) { fill: blue; } </style>

Attribute Default Description
type text/css Type of the stylesheets contents, currently only text/css is supported.
media (empty) [unsupported] Specifies a media query that must be matched for the style sheet to apply.
title (empty) [unsupported] Specifies a title for the style sheet, which is used when selecting between alternate style sheets.

Note that type is defined to be a media type [rfc2046].

Children

Either text or CDATA nodes are allowed as child nodes.