複数の色を1つの文字（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>