Css 使用SVG以竖排书写模式创建渐变文本时，文本显示异常

发布于11月02日

我正在try 创建垂直方向的文本与从右向左渐变使用下面的代码.但是，文本显示不正确.

text {
  writing-mode: vertical-rl;
  font-size: 50px;
  font-weight: bold;
}

<svg width="500" height="500">
  <defs>
    <linearGradient id="grad-md" x1="100%" y1="0%" x2="0%" y2="0%">
      <stop offset="0%" style="stop-color:#374151; stop-opacity:1"></stop>
      <stop offset="55%" style="stop-color:#374151; stop-opacity:1"></stop>
      <stop offset="100%" style="stop-color:#fff; stop-opacity:0"></stop>
    </linearGradient>
  </defs>
  <text x="50" y="50" fill="url(#grad-md)">测试文本123</text>
</svg>

正如您所看到的，最初的几个中文字符没有正确显示，中文文本的渐变方向也不正确.

推荐答案

默认情况下，text-origination是mixed，适用于不同的语言.这会导致使用不同的坐标系进行梯度计算.你可以强迫他们使用upright或sideways来统一计算(但这意味着你的中文也会倾斜):

text {
  writing-mode: vertical-rl;
  font-size: 50px;
  font-weight: bold;
  text-orientation: sideways;
}

<svg width="500" height="500">
    <defs>
        <linearGradient id="grad-md" x1="100%" y1="0%" x2="0%" y2="0%">
            <stop offset="0%" style="stop-color:#374151; stop-opacity:1"></stop>
            <stop offset="55%" style="stop-color:#374151; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#fff; stop-opacity:0"></stop>
        </linearGradient>
    </defs>
    <text x="50" y="50" fill="url(#grad-md)">测试文本123</text>
</svg>

但是，如果您只想对文本应用一些渐变，非SVG解决方案可能是更好的 Select :

span {
  background-image: linear-gradient(to right, red, blue);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 50px;
  writing-mode: vertical-lr;
  color: transparent;
  font-weight: bold;
  white-space: nowrap;
}