如何用透明文字制作文字笔画 [英] How to make a text stroke with transparent text

问题描述

我找到了以下解决方案:对文本的轮廓效果 哪个很棒，但是是否可以使文本透明并且仅绘制轮廓? 例如，这会发生在框阴影中，即使框没有背景，您也不会在框下方"看到阴影.但是对于文本来说，如果它是透明的，那么您会抓住类型的整个阴影. 可以只获得带有透明文本的轮廓吗?

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?

问题是，对于不支持-webkit-text-outline的浏览器，会有一个很好的后备，因为它们不会绘制轮廓，并且会使文本不可见...

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...

推荐答案

您可以使用内嵌的svg来实现带有文本笔划的透明文本.

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

您可以使用<text>元素(更多信息在MDN 上)，将fill属性设置为none或transparent可以使文本透明，并使用stroke porperty可以使文本轮廓. stroke-width和stroke-color可以定义文本笔触的粗细和颜色

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: url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size: cover;
}
svg{width:100%;}

<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>

这篇关于如何用透明文字制作文字笔画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！