将 textLength 应用于 SVG tspan 元素内联（水平）答案

【问题标题】：Applying textLength to SVG tspan elements inline (horizontal)将 textLength 应用于 SVG tspan 元素内联（水平）
【发布时间】：2018-11-25 23:38:45
【问题描述】：

我正在尝试做一些简单的事情：显示一个单词（一个 SVG text 元素），其中每个字符都有不同的颜色。我以编程方式执行此操作：我将字符串拆分为字符，并将每个字符插入到 tspan 元素中，每个字符都在 text 元素中。我使用textLength 属性作为间距。

我尝试了很多排列，但找不到适用于所有浏览器的解决方案。

这里有一些代码（只是 SVG）。三个示例，只是为了展示不同浏览器的行为方式。第三个是我想要的。它可以在 Chrome 中使用，但其他所有浏览器的呈现方式都不同：

<svg width = "250px" height = "100px">
  <style>
    text {
      font-size: 30px;
      font-family: sans-serif;
      font-weight: bold;
    }
  </style>

  // A regular text element:
  <text y = "30px" textLength = "250px" fill = "hsl(120, 100%, 10%)">
    greengradient
  </text>

  // A text element with tspan elements:
  <text y = "60px">
    <tspan textLength = "250px" fill = "hsl(120, 100%, 70%)">green</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 10%)">gradient</tspan>
  </text>

  // A text element with a tspan element for every character:
  <text y = "90px">
    <tspan textLength = "250px" fill = "hsl(120, 100%, 70%")>g</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 65%")>r</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 60%")>e</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 55%")>e</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 50%")>n</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 45%")>g</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 40%")>r</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 35%")>a</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 30%")>d</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 25%")>i</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 20%")>e</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 15%")>n</tspan>
    <tspan textLength = "250px" fill = "hsl(120, 100%, 10%")>t</tspan>
  </text>
</svg>

是否有一种与浏览器一致的方式将textLength 应用于内联tspan 元素？

【问题讨论】：

我现在没有时间进行跨浏览器测试，但我有两点我认为你应该考虑到： 1. <text> 元素内的所有空格都被渲染，即使它们在<tspan> 之外 - 所以请确保它们在变体之间匹配。 2. textLength 仅应用于应该具有计算长度的元素，而不是其子元素。在这种情况下，它始终是 <text> 元素，而不是 <tspan>。此外，仅用于一个印刷字符的textLength 无效，因为只能调整第一个字符和最后一个字符之间的。
谢谢@ccprog。关于第 2 点，我也曾想过，但只有将 textLength 应用于 tspan 元素，它才能在 Chrome 中运行。我刚刚尝试了您的方法（仅将其应用于text 元素）并发现当我这样做时它仅适用于Firefox！我将textLength 应用于单个字符的原因纯粹是为了让它们适应空间。
如果你想对文本应用渐变，为什么不直接应用 linearGradient 而不是为每个字母着色？
你应该像这样创建一个线性渐变：<linearGradient id="lg" > <stop offset="0%" stop-color="hsl(120, 100%, 70%)"></stop> <stop offset="100%" stop-color="hsl(120, 100%, 10%)"></stop> </linearGradient>，然后填充文本：fill = "url(#lg)"
@Markus 将源代码下载到 Firefox 并为bugzilla.mozilla.org/show_bug.cgi?id=890692创建补丁

标签： css svg

【解决方案1】：

感谢Robert Longson 和enxaneta，我将回答（并结束）这个问题。

经过试验，没有方法可以将textLength 应用于跨浏览器一致的内联tspan 元素。该标准仍在制定中。几个例子：

火狐：

铬：

边缘：

另一个问题——如何将渐变颜色应用到text 元素——比我复杂的第一次尝试更容易。将 linearGradient 元素应用于 SVG，然后将其链接到 text 元素：

<svg width = "300px" height = "40px">
  <linearGradient id="gradient">
    <stop offset="0%" stop-color="hsl(120, 100%, 70%)"></stop>
    <stop offset="100%" stop-color="hsl(120, 100%, 10%)"></stop>
  </linearGradient>
  <style>
    text {
      font-size: 30px;
      font-family: sans-serif;
      font-weight: bold;
    }
  </style>
  <text y = "30px" textLength = "300px" fill = "url(#gradient)">
    greengradient
  </text>
</svg>

【讨论】：