Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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 (Yes) (Yes) No support (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? No support No support No support No support

文件標籤與貢獻者

 此頁面的貢獻者: mrdeal, Llbe, teoli, kscarfone, Jeremie, Heycam
 最近更新: mrdeal,