How to make a text stroke with transparent text

Issue

I found this solution: Outline effect to text Which is great, but is it posible to make the text transparent and only the outline to draw? This happens with box-shadow, for example, as even if the box doesn't have a background, you won't see the shadow "under" the box. But with text, if it is transparent, you se the whole shadow of the type. Is it posible to get only the outline with transparent text?

EDIT: The problem with this is to have a nice fallback for browsers that don't support for example -webkit-text-outline, because they wouldn't draw the outline and they would make the text invisible...

Solution

You can achieve the transparent text with text-stroke with an inline svg.

You can use the <text> element (more info on MDN) set the fill property to none or transparent to make the text transparent and use the stroke porperty to make the text outline. stroke-width and stroke-color can define the texte stroke thickness and color

Here is an example: transparent text with a white stroke and a background image showing through the text:

body {
  background-size: cover;
}
svg{
  width:100%;
  background-color: #333;
  box-shadow: inset -50px -50px 100px pink;
}

<svg viewbox="0 0 10 2">
  <text x="5" y="1" text-anchor="middle" font-size="1" fill="none" stroke-width=".015" stroke="#fff" font-family="sans-serif">Text stroke</text>
</svg>

Answered By - web-tiki