多个对象上的一个渐变

Question

我想知道如何将一种渐变应用于多个对象。

假设我有十个彼此相邻的圆圈，并且有从黄色到红色的渐变。所有点现在应该一起显示渐变。

例子：

svg {
  height: 200px;
  overflow: visible;
}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 345">
        <defs>
            <linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#ffff25" />
                <stop offset="100%" stop-color="#f71818" />
            </linearGradient>
        </defs>
      <g >
        <circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
      </g>
    </svg>

Answer 1

我希望这就是您所要求的：

// initiate the canvas
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 297);
let ch = (canvas.height = 550);

// create the liniar gradient
// SVG equivalent <linearGradient x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
let grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// SVG equivalent: <stop offset="0%" stop-color="#ffff25" />
grd.addColorStop(0, "#ffff25");
// SVG equivalent: <stop offset="100%" stop-color="#f71818" />
grd.addColorStop(1, "#f71818");
ctx.fillStyle = grd;

//draw the circles
for (let y = 100; y < 550; y += 100) {
  drawCircle(90,y,50);
}

function drawCircle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}

svg,canvas{border:1px solid; width:297px;}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 550">
        <defs>
            <linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#ffff25" />
                <stop offset="100%" stop-color="#f71818" />
            </linearGradient>
        </defs>
      <g >
        <circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
      </g>
    </svg>

<canvas></canvas>

更新

我添加了另一个示例，其中渐变部分应用于每个圆

// initiate the canvas
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 297);
let ch = (canvas.height = 550);


//draw the circles
for (let y = 100; y < 550; y += 100) {
  ctx.fillStyle = Grd(90,y,50)
  drawCircle(90,y,50);
}

function drawCircle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}


function Grd(cx,cy,r) {
  grd = ctx.createLinearGradient(cx-r,cy-r,cx+r,cy+r);
  grd.addColorStop(0, "#ffff25");
  grd.addColorStop(1, "#f71818");

  return grd;
}

svg,canvas{border:1px solid; width:297px;}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 550">
        <defs>
            <linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
                <stop offset="0%" stop-color="#ffff25" />
                <stop offset="100%" stop-color="#f71818" />
            </linearGradient>
        </defs>
      <g >
        <circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
      </g>
    </svg>

<canvas></canvas>

请注意，在这种情况下，SVG 线性渐变使用 gradientUnits="objectBoundingBox". 在画布中，我必须编写一个函数，为每个圆创建不同的渐变。