使用SVG创建vertical-rl模式渐变文本时显示异常，求解决方案

问题根源 #

1. 中文字符显示异常：vertical-rl排版下，SVG文本的默认起始坐标（x=50,y=50）会让从右向左排列的文本超出SVG可视区域，导致开头字符被截断；同时未显式指定text-orientation可能导致部分环境下中文排版异常。
2. 渐变方向错误：原渐变采用默认的objectBoundingBox坐标系，且是水平方向渐变，和垂直文本的"从右到左"排版方向不匹配，导致渐变效果不符合预期。

修正代码 #

CSS #

text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 强制中文正立排版，避免旋转 */
  font-size: 50px;
  font-weight: bold;
}

SVG #

<svg width="500" height="500">
  <defs>
    <!-- 使用用户坐标系匹配垂直文本的渐变方向 -->
    <linearGradient id="grad-md" x1="100%" y1="0%" x2="0%" y2="0%" gradientUnits="userSpaceOnUse">
      <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>
  <!-- 将文本起始点移至右侧，适配vertical-rl从右向左的排版 -->
  <text x="400" y="100" fill="url(#grad-md)">测试文本123</text>
</svg>

核心调整说明 #

• 文本显示修复：
  • 添加text-orientation: upright，确保中文汉字在垂直排版时保持正立，避免部分浏览器/环境下的字符旋转问题。
  • 调整文本的x坐标到SVG右侧区域（示例中设为400），因为vertical-rl是按"从右到左"的列顺序排版，起始点偏右才能让完整文本显示在可视范围内。
• 渐变方向修正：
  • 给linearGradient添加gradientUnits="userSpaceOnUse"，让渐变坐标基于SVG全局坐标系，而非文本元素的边界框，确保渐变的"从右到左"方向和垂直文本的排版方向对齐。
  • 如果希望渐变严格贴合文本元素的宽度，可以改用gradientUnits="objectBoundingBox"（默认值），此时渐变的x1=1、x2=0会沿着文本元素的宽度方向从右到左渐变，效果一致。

内容的提问来源于stack exchange，提问作者Nauxscript