Spock Spock - 3 months ago 12
CSS Question

Multiple colors in one single character(svg)

I'm looking for a solution in SVG that enables several colors in one single character without any visual gradients.

Here is an example of how I want the result to look like

http://i.stack.imgur.com/BNwT9.png

Here is the best solution that I can come up with. This works perfect with only 2 colors, but more colors doesn't give the result that I want.

<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

Use multiple stops of the same colour if you don't want gradients.

    <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>