Keep SVG stroke from filling text

user_14341318 0
Viewed 247

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

svg css
1 Answers

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;
}
user_143411260
Related