style

  • Revision slug: SVG/Attribute/style
  • Revision title: style
  • Revision id: 57276
  • Created:
  • Creator: pa7
  • Is current revision? No
  • Comment 78 words added

Revision Content

« SVG Attribute reference home

This attribute specifies style information for the current element. The style attribute specifies style information for a single element. The style sheet language of inline style rules is given by the value of attribute {{ SVGAttr("contentStyleType") }} on the {{ SVGElement("SVG") }} element.

Usage context

Categories Presentation attribute
Value <style>
Animatable No
Normative document SVG 1.1 (2nd Edition)
<style>
The syntax of style data depends on the style sheet language. By default, if {{ SVGAttr("contentStyleType") }} is not defined, the style sheet language is CSS.

Example

The following example shows styling of a rectangle with the style attribute using CSS as style sheet language.

<svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"/>
  <rect height="300" style="fill: red; stroke: blue; stroke-width: 3" width="600" x="200" y="100"/>

Elements

The following elements can use the style attribute

Related

  • {{ SVGElement("style") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>This attribute specifies style information for the current element. The style attribute specifies style information for a single element. The style sheet language of inline style rules is given by the value of attribute {{ SVGAttr("contentStyleType") }} on the {{ SVGElement("SVG") }} element.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td>&lt;style&gt;</td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" title="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>&lt;style&gt;</dt> <dd>The syntax of style data depends on the style sheet language. By default, if {{ SVGAttr("contentStyleType") }} is not defined, the style sheet language is CSS.</dd>
</dl>
<h2>Example</h2>
<p>The following example shows styling of a rectangle with the style attribute using CSS as style sheet language.</p>
<pre class="brush: html"><!--?xml version="1.0" standalone="no"?-->

&lt;svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"/&gt;
  &lt;rect height="300" style="fill: red; stroke: blue; stroke-width: 3" width="600" x="200" y="100"/&gt;

</pre>
<h2>Elements</h2>
<p>The following elements can use the <code>style</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">Container elements</a> »</li> <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> <li><a href="/en/SVG/Element#Gradient" title="en/SVG/Element#Gradient">Gradient elements</a> »</li> <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li> <li><a href="/en/SVG/Element#Structural" title="en/SVG/Element#Structural">Structural elements</a> »</li> <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> <li>{{ SVGElement("clipPath") }}</li> <li>{{ SVGElement("filter") }}</li> <li>{{ SVGElement("font") }}</li> <li>{{ SVGElement("foreignObject") }}</li> <li>{{ SVGElement("glyphRef") }}</li> <li>{{ SVGElement("stop") }}</li> <li>{{ SVGElement("glyph") }}</li>
</ul>
<h2>Related</h2>
<ul> <li>{{ SVGElement("style") }}</li>
</ul>
Revert to this revision