我有一个 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>
我试过调整笔划宽度,甚至移动字体大小,但这些似乎都没有帮助。我正在寻找的只是带有描边颜色的字母周围的轻 microprofile ,但对于它们来说主要是填充颜色
最佳答案
您正在寻找的具体内容是 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;
}
关于css - 防止 SVG 描边填充文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64067751/