Your Search Results

    paint-order

    « SVG Attribute reference home

    The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are 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

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 21.0 (21.0) (behind a pref) [1] Not supported Not supported Not supported Not supported
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support ? Not supported Not supported Not supported Not supported

    [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.

    Attachments

    File Size Date Attached by
    paint-order example rendering
    An image showing how the paint-order example looks in a UA that supports the paint-order property
    47831 bytes 2013-01-12 17:15:09 Heycam

    Document Tags and Contributors

    Contributors to this page: Heycam, teoli, kscarfone, Jeremie
    Last updated by: teoli,