paint-order

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

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

• <circle>
• <ellipse>
• <line>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tspan>

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

normal

Это значение указывает, что сначала будет отрисована заливка, затем обводка и, наконец, маркеры.

[ fill || stroke || markers ]

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

Пример

<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="#888888" />
    <stop stop-color="#cccccc" 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>

Результат примера будет выглядеть так:

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

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

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

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