CSS свойство paint-order

определение и использование

paint-order свойство определяет порядок рисования SVG элемента или текста.

обратите внимание:для текстовых элементов можно изменить порядок обводки (stroke) и заливки (fill), так как маркеры (markers) не применяются.

пример

пример 1

изменить порядок рисования SVG <circle> элемента:

circle {
  paint-order: stroke fill;
}

попробуйте сами

пример 2

изменить порядок рисования SVG <text> элемента с радужной заливкой градиента:

text {
  paint-order: stroke fill;
}

попробуйте сами

CSS синтаксис

paint-order: normal|одно значение|два значения|три значения|initial|inherit;

значение свойства

значение описание
normal значение по умолчанию. Последовательность рисования: заполнение, обводка, маркеры.
одно значение

рисование начнется с заданных значений и продолжится по умолчанию для оставшейся части.

если указан только "stroke", следующей операцией будет заполнение (fill), затем маркеры (markers).
два значения

рисование начнется с заданных значений и продолжится по умолчанию для оставшейся части.

если указан "stroke markers", следующей операцией будет заполнение (fill).
три значения рисование будет производиться в соответствии с заданными значениями.
initial установить этот атрибут в его значение по умолчанию. См. также initial.
inherit получает этот атрибут от родительского элемента. См. также inherit.

технические детали

по умолчанию: normal
наследование: да
создание анимации: не поддерживается. См. также:свойства анимации.
версия: CSS3
JavaScript синтаксис: object.style.paintOrder="stroke fill"

поддержка браузеров

числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
35.0 17.0 60.0 8.0 22.0

соответствующие страницы

Урок:Уроки SVG

Урок:Графика HTML SVG