我有一个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>
我尝试过调整笔触宽度,甚至移动字体大小,但是似乎没有任何帮助。我要寻找的只是带有笔划颜色的字母周围的略微轮廓,但对于它们来说大部分是填充颜色
答案 0 :(得分:4)
您要寻找的是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;
}