SVG - 使用喷射颜色方案填充矩形

Question

使用喷射颜色方案填充SVG矩形的正确方法是什么？在linearGradient中使用多个站点似乎不起作用。

编辑，我想用下列颜色渐变之一填充矩形。

Answer 1

我编辑的MDN代码彩虹例如

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

在小提琴

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

我换了红色和蓝色，调整偏移百分比的位置，以尽量使其看起来更像你的形象。你应该能够改变颜色并为其他人添加/删除停止。