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

Question

我正在尝试做一些应该简单的事情：显示一个单词（一个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元素？

Answer 1

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

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

Firefox：

Chrome浏览器：

边缘：

另一个问题-如何将渐变颜色应用于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>