防止 SVG 笔划填充文本答案

【问题标题】：Keep SVG stroke from filling text防止 SVG 笔划填充文本
【发布时间】：2020-09-25 16:11:20
【问题描述】：

我有一个 SVG 文本，用于在我的网页上显示一种标题，但它总是看起来很糟糕。我不太清楚如何描述它，但是字母的轮廓比我想要的要大得多。

代码

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>

我尝试过调整笔画宽度，甚至移动字体大小，但似乎这些都没有帮助。我正在寻找的只是带有笔触颜色的字母周围的轻微轮廓，但它们主要是填充颜色

【问题讨论】：

只是减小笔画宽度？
我试过了，但没有用，它要么降低了边框质量，要么仍然填充了文本

标签： css svg

【解决方案1】：

您正在寻找的具体是 css 的绘制顺序。只需将您的 CSS 更改为：

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

【讨论】：