Применение textLength к элементам SVG tspan inline (по горизонтали)

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

Я отвечу (и закончу) на этот вопрос, благодаря Роберту Лонгсону и enxaneta .

После экспериментов осталось нет способ применения textLength для встроенных tspan элементов в разных браузерах.Стандарт все еще разрабатывается.Несколько примеров:

Firefox:

Chrome:

Edge:

Другой вопрос - как применить цвет градиента к 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>