SVG - ジェットカラースキームを使用した塗りつぶしの長方形

Question

ジェットカラースキームを使用してSVG四角形を塗りつぶす正しい方法は何ですか？ linearGradientで複数のストップを使用しても動作しないようです。

編集、次の色のグラデーションのいずれかで矩形を塗りつぶしています。

Answer 1

私はフィドルで

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients --> 

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> 
     <stop offset="0%" stop-color="#d30000"/> 
     <stop offset="30%" stop-color="#ffff05"/> 
     <stop offset="50%" stop-color="#05ff05"/> 
     <stop offset="70%" stop-color="#05ffff"/> 
     <stop offset="100%" stop-color="#041ae0"/> 
    </linearGradient> 
    </defs> 

    <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> 

</svg> 

虹の例でMDNコードを編集した：https://jsfiddle.net/9bmvr5hd/

Answer 2

BbwrR勾配がMozilla's SVG - Gradients documentationで使用される例である：

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <linearGradient id="Gradient1"> 
 
     <stop class="stop1" offset="25%"/> 
 
     <stop class="stop2" offset="50%"/> 
 
     <stop class="stop3" offset="75%"/> 
 
     </linearGradient> 
 
     <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> 
 
     <stop offset="25%" stop-color="blue"/> 
 
     <stop offset="50%" stop-color="black" stop-opacity="0"/> 
 
     <stop offset="75%" stop-color="red"/> 
 
     </linearGradient> 
 
     <style type="text/css"><![CDATA[ 
 
     #rect1 { fill: url(#Gradient1); } 
 
     .stop1 { stop-color: blue; } 
 
     .stop2 { stop-color: black; stop-opacity: 0; } 
 
     .stop3 { stop-color: red; } 
 
     ]]></style> 
 
    </defs> 
 
    
 
    <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> 
 
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> 
 
    
 
</svg>

私はそれがより多くのように見えるようにしようとする赤と青と調整オフセットパーセンテージの位置を入れ替えあなたのイメージあなたは色を変更し、他のものに対して停止を追加/削除することができるはずです。