javascript - 一个字符中的多种颜色(svg)

Question

我正在寻找一种 SVG 解决方案，它可以在一个字符中启用多种颜色而没有任何视觉渐变。

这是我想要的结果的示例

这是我能想到的最佳解决方案。这仅适用于 2 种颜色，但更多颜色无法提供我想要的结果。

    <svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <defs>
    <linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="33%" stop-color="blue"/>
        <stop offset="33%" stop-color="red"/>
        <stop offset="66%" stop-color="orange"/>
    </linearGradient>
    </defs>

    <text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6
    </text>
  </svg>

Answer 1

如果您不想要渐变，请使用相同颜色的多个色标。

    <svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <defs>
    <linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="33%" stop-color="blue"/>
        <stop offset="33%" stop-color="red"/>
        <stop offset="66%" stop-color="red"/>
        <stop offset="66%" stop-color="orange"/>
    </linearGradient>
    </defs>

    <text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6
    </text>
  </svg>