CODEWITHSUNDEEP
cssgoogle-chromesvgfirefox
user12273078
user12273078

Reputation:

SVG paint-order with letter-spacing in Chrome

In SVG the paint-order allows us to "control the order in which the fill and stroke of text content and shapes are drawn", and it's quite useful to put the stroke behind the fill.

However, I just found that in Chrome, when changing the letter-spacing CSS property, instead of all strokes being painted behind all fills it seems that each letter is painted individually.

For instance, given this snippet:

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>

This is how it looks like in Chrome:

enter image description here

While, in Firefox for instance, the result is what I'd expect:

enter image description here

Thus, before reporting a bug, I'd like to ask: is this behaviour really implementation-dependent (that is, each browser implements it the way they please) or is it specified somewhere in the SVG documentation?

Upvotes: 3

Views: 196

Answers (1)

enxaneta
enxaneta

Reputation: 33054

This is an alternative solution: instead of adding a stroke: wheat to the text you can use a filter feMorphology with an operator="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>

Upvotes: 1

Related Questions