3

В 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

1

1 ответ 1

3

Это альтернативное решение: вместо добавления цвета к обводке текста stroke ="wheat", вы можете использовать фильтр feMorphology с оператором = "dilate".

text {
  font-size: 60px;
  letter-spacing: -5px;
}
<svg width="500" height="120">
<filter id="outline">
<feMorphology in="SourceAlpha" result="expanded"
operator="dilate" radius="3"/>
<feFlood flood-color="wheat" result="color" />
<feComposite in ="color" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
  <text filter="url(#outline)" x="10" y="100">This is an example</text>
</svg>

Свободный перевод ответа от участника @enxaneta.

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.