mozilla

Revision 346799 of paint-order

  • Revision slug: SVG/Attribute/paint-order
  • Revision title: paint-order
  • Revision id: 346799
  • Created:
  • Creator: Heycam
  • Is current revision? No
  • Comment

Revision Content

« SVG Attribute reference home

The paint-order attribute specifies the order that the fill, stroke and markers of a given shape or text element is painted. Its default value is normal, which indicates that the fill will be painted first, then the stroke, and finally the markers. To specify a different order, a white space separated list of keywords fill, stroke and markers can be used. If any of the three painting components is omitted, then they will be painted in their default order after the specified components. For example, using stroke is equivalent to stroke fill markers.

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

Usage context

Categories Presentation attribute
Value normal | [ fill || stroke || markers ] | inherit
Animatable Yes
Normative document SVG 2

Example

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
    <stop stop-color="#888"/>
    <stop stop-color="#ccc" offset="1"/>
  </linearGradient>
  <rect width="400" height="200" fill="url(#g)"/>
  <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round"
     text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold">
    <text x="200" y="75">stroke over</text>
    <text x="200" y="150" paint-order="stroke">stroke under</text>
  </g>
</svg>

The example would be rendered as follows:

An image showing how the paint-order example looks in a UA that supports the paint-order property.

Elements

The following elements can use the paint-order attribute:

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("21.0") }} (behind a pref) [1] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

[1] To activate support for the paint-order property in Firefox 21 and later, the user has to change the about:config preference "svg.paint-order.enabled" to true. Support is enabled by default in Firefox Nightly and Aurora channels, but will only be enabled by default in Release and Beta once the SVG 2 specification matures.

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>paint-order</code> attribute specifies the order that the fill, stroke and markers of a given shape or text element is painted. Its default value is <strong>normal</strong>, which indicates that the fill will be painted first, then the stroke, and finally the markers. To specify a different order, a white space separated list of&nbsp;keywords <strong>fill</strong>, <strong>stroke</strong> and <strong>markers</strong> can be used. If any of the three painting components is omitted, then they will be painted in their default order after the specified components. For example, using <strong>stroke</strong> is equivalent to <strong>stroke fill markers</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>Categories</th>
      <td>Presentation attribute</td>
    </tr>
    <tr>
      <th>Value</th>
      <td>normal | [ fill || stroke || markers ] | inherit</td>
    </tr>
    <tr>
      <th>Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th>Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG2/painting.html#PaintOrderProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty">SVG 2</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<pre>
&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
&nbsp; &lt;linearGradient id="g" x1="0" y1="0" x2="0" y2="1"&gt;
&nbsp;&nbsp;&nbsp; &lt;stop stop-color="#888"/&gt;
&nbsp;&nbsp;&nbsp; &lt;stop stop-color="#ccc" offset="1"/&gt;
&nbsp; &lt;/linearGradient&gt;
&nbsp; &lt;rect width="400" height="200" fill="url(#g)"/&gt;
&nbsp; &lt;g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round"
&nbsp;&nbsp;&nbsp;&nbsp; text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"&gt;
&nbsp;&nbsp;&nbsp; &lt;text x="200" y="75"&gt;stroke over&lt;/text&gt;
&nbsp;&nbsp;&nbsp; &lt;text x="200" y="150" paint-order="stroke"&gt;stroke under&lt;/text&gt;
&nbsp; &lt;/g&gt;
&lt;/svg&gt;</pre>
<p>The example would be rendered as follows:</p>
<p><img alt="An image showing how the paint-order example looks in a UA that supports the paint-order property." src="/files/4567/paint-order-2.png" style="width: 400px; height: 200px;" /></p>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>paint-order</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>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("21.0") }} (behind a pref) [1]</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] To activate support for the <code>paint-order</code> property in Firefox 21 and later, the user has to change the about:config preference "svg.paint-order.enabled" to <code>true</code>. Support is enabled by default in Firefox Nightly and Aurora channels, but will only be enabled by default in Release and Beta once the SVG 2 specification matures.</p>
Revert to this revision