Question

我正在寻找一种SVG解决方案，可以在一个单一字符中实现多种颜色，而不会产生任何视觉渐变。

以下是我希望结果看起来像

的示例

Configure Spring Security without XML in Spring 4

这是我能提出的最佳解决方案。这只适用于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>

一个单一字符中的多种颜色（svg）

1 个答案: