css - 将 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 元素。该标准仍在制定中。几个例子:

火狐:

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>