mozilla

Revision 371259 of stroke-opacity

  • Revision slug: SVG/Attribute/stroke-opacity
  • Revision title: stroke-opacity
  • Revision id: 371259
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

« SVG Attribute reference home

the stroke-opacity attribute specifies the opacity of the outline on the current object. Its default value is 1.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

Usage context

Categories Presentation attribute
Value <opacity-value> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<opacity-value>
The opacity of the painting operation used to outline the current object, as a number. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

Example

SVG

<svg width="120px" height="120px" viewBox="0 0 120 120">
  <rect x="10" y="10" width="100" height="100"/>
</svg>

CSS

rect{
  fill:#b4da55;
  stroke:#000;
  stroke-width:10px;
  stroke-opacity:0.3;
}

Result

{{EmbedLiveSample("Example",120,120)}}

Elements

The following elements can use the stroke-opacity attribute

See also

  • {{ SVGAttr("fill-opacity") }}
  • {{ SVGAttr("opacity") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>the <code>stroke-opacity</code> attribute specifies the opacity of the outline on the current object. Its default value is <strong>1</strong>.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet</p>
<h2 id="Usage_context">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;opacity-value&gt; | inherit</td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<dl>
  <dt>
    &lt;opacity-value&gt;</dt>
  <dd>
    The opacity of the painting operation used to outline the current object, as a number. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.</dd>
</dl>
<h2 id="Example">Example</h2>
<h3>SVG</h3>
<pre class="brush: html">
&lt;svg width="120px" height="120px" viewBox="0 0 120 120"&gt;
  &lt;rect x="10" y="10" width="100" height="100"/&gt;
&lt;/svg&gt;</pre>
<h3>CSS</h3>
<div>
  <pre class="brush: css">
rect{
  fill:#b4da55;
  stroke:#000;
  stroke-width:10px;
  stroke-opacity:0.3;
}</pre>
  <h3>Result</h3>
  <div>
    {{EmbedLiveSample("Example",120,120)}}</div>
</div>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>stroke-opacity</code> attribute</p>
<ul>
  <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a>&nbsp;»</li>
  <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a>&nbsp;»</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ SVGAttr("fill-opacity") }}</li>
  <li>{{ SVGAttr("opacity") }}</li>
</ul>
Revert to this revision