提问人：Clms 提问时间：10/30/2018 最后编辑：KaiidoClms 更新时间：10/31/2018 访问量：1139
一个渐变覆盖多个对象
One gradient over multiple objects
问：
我想知道如何将一个渐变应用于多个对象。
假设我有十个彼此相邻的圆圈，并且有一个从黄色到红色的渐变。 现在，所有点一起应该显示渐变。
例：
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>答：
5赞
enxaneta
10/30/2018
#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 线性渐变使用 .在 canvas 中，我必须编写一个函数，为每个圆创建不同的渐变。gradientUnits="objectBoundingBox"
评论
0赞
Clms
10/31/2018
好！非常感谢！我在网上找不到那个解决方案。你能帮我了解一下梯度是如何应用的吗？似乎您将渐变应用到画布上，然后在上面画圆圈？这对我来说似乎有悖常理。为什么将渐变应用于画布而不是每个圆圈？
1赞
enxaneta
10/31/2018
您在 SVG 中也做了同样的事情。渐变与您的 SVG 画布一样大，因为您使用的是 .如果随变化，渐变将应用于部分的每个圆圈。gradientUnits="userSpaceOnUse"gradientUnits="userSpaceOnUse"gradientUnits="objectBoundingBox"
0赞
enxaneta
10/31/2018
我已经用一些评论和另一个示例更新了我的答案，在 SVG 和画布中，我将渐变应用于部分的每个圆圈。
0赞
Clms
10/31/2018
非常感谢！这真的很有帮助:)
上一个：用表情符号替换字符串
评论