В SVG атрибут paint-order
позволяет нам управлять последовательностью, в котором отрисовываются заливка и обводка текстового содержимого и фигур, и очень полезно помещать обводку поверх заливки.
Однако, я только что обнаружил, что в Chrome при изменении свойства CSS letter-spacing
вместо того, чтобы рисовать все strokes
поверх всех заливок, кажется, что каждая буква окрашивается индивидуально.
Например, учитывая этот фрагмент:
text {
font-size: 60px;
stroke: wheat;
stroke-width: 10px;
letter-spacing: -5px;
paint-order: stroke;
}
<svg width="500" height="120">
<text x="10" y="100">This is an example</text>
</svg>
Вот так выглядит в Chrome:
В то время как, в Firefox результат именно такой, как я ожидал:
Таким образом, прежде чем сообщать об ошибке, я хотел бы спросить: действительно ли это поведение зависит от реализации (то есть каждый браузер реализует его так, как им нравится), или это указано где-то в документации SVG?
Свободный перевод вопроса SVG paint-order with letter-spacing in Chrome от участника @Megaptera novaeangliae