Keep SVG stroke from filling text

3
votes

I have an SVG text that I am using to show a type of header on my webpage, but it always comes out looking horrible. I'm not quite sure how to describe it, but the outline of the letters are much larger than what I would like.

Code

text {
  fill: #f8a100;
  font-size: 80px;
  stroke-linejoin: round;
  text-anchor: middle;
  fill: #81d8d0;
  stroke: #000;
  stroke-width: 4px;
}
<svg width="900" height="150" viewBox="0 0 900 150">
  <text x="175" y="80">Welcome!</text>
</svg>

I have tried adjusting the stroke-width, and even moving the font-size, but it doesn't seem like either of those help. What I'm looking for is just a slight outline around the letters with the stroke color, but for them to mostly be the fill color

1
csssvg
just reduce the stroke-width? - Robert Longson
I tried that but it doesn't help, it either degrades the border quality or it still fills the text - user14341318

1 Answers

4
votes

What you are looking for specifically is the paint-order for css. Just change your CSS to this:

text {
  fill: #f8a100;
  font-size: 80px;
  stroke-linejoin: round;
  text-anchor: middle;
  fill: #81d8d0;
  stroke: #000;
  stroke-width: 4px;
  paint-order: stroke fill;
}