文字描边方案（可否支持svg画图paint-order属性）
发布于 6 年前 作者 gqiao 17684 次浏览 来自 问答

需求：画描边字体，希望描边圆润

已尝试方案：

  • text-shodow：设置“上下左右”“左上右上左下右下”八个方向实阴影，效果勉强

  • -webkit-text-stroke:     

 

.text {
    position: relative;
}
.text::before, .text::after {
    content: attr(data-text);
    font-size: 48rpx;
    color: #fff;
    font-weight: 900;
}
.text::before {
    -webkit-text-stroke: 8rpx #000;
}
.text::after {
    position: absolute;
    top: 0;
    left: 0;
}
<div class="text" data-text="描边文字"></div>

效果还可以，但描边太尖锐，希望圆润一些

  • SVG:

    浏览器中通过使用paint-order: stroke; 可以实现圆滑描边效果，但在小程序中该属性不支持


<svg>
  <text x="10" y="40" class="text">SVG 1000 20 描边文字</text>
</svg>
 
body {
      background-color: #e54e5f;
    }
.text {
      fill: #fff;
      stroke: #000;
      font-size: 36px;
      font-weight: bolder;
      font-family: sans-serif;
      stroke-width: 12px;
      stroke-linejoin: round;
      paint-order: stroke；
    }

问题：请问小程序中文字圆滑描边的方案？

1 回复

顶一下，svg的相关属性，移动端的兼容性很好，但是小程序完全不支持，希望可以加进来

回到顶部