paint-order

Атрибут paint-order определяет порядок, в котором заполнение, обводка и маркеры данного элемента фигуры или текста рисуются.

Примечание: В качестве атрибута отображения paint-order может использоваться как свойство CSS.

Вы можете использовать этот атрибут со следующими элементами SVG:

Примечания по использованию

Значение	`normal` \| [ `fill` \|\| `stroke` \|\| `markers` ]
Значение по умолчанию	`normal`
Анимируемо	дискретно

normal: Это значение указывает, что заполнение будет нарисовано в первую очередь, затем обводка, а в последнюю очередь — маркеры.
[ fill || stroke || markers ]: Порядок этих трёх ключевых слов определяет порядок рисования слева направо. Если любой из трёх компонентов рисования опущен, они будут нарисованы в их стандартном порядке после указанных компонентов. Например, использование stroke эквивалентно stroke fill markers.

Пример

html

<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" id="stroke-under">
      stroke under
    </text>
  </g>
</svg>

Пример будет отображён следующим образом:

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

Эффект обводки можно достичь с помощью следующего свойства CSS:

css

#stroke-under {
  paint-order: stroke;
}

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # PaintOrder

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`paint-order`	≤73	≤79	≤66	60	≤12	73	66	Нет	Нет	11.0	Нет

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order