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

Question

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

编辑，我正在尝试使用以下颜色渐变之一填充矩形。

Answer 1

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>

我交换了红色和蓝色的位置并调整了偏移百分比，以使其看起来更像您的图像。您应该只需更改颜色并为其他人添加/删除停止。

Answer 2

我用彩虹示例编辑了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/