在 SVG 中创建可变渐变答案

【问题标题】：Create variable gradient within SVG在 SVG 中创建可变渐变
【发布时间】：2015-07-31 00:59:10
【问题描述】：

是否可以使用 SVG 对象创建可变渐变？这是我想要做的：

我有一个水平条形图，我想对其应用底纹。因此，最顶部的条将具有最多的阴影，之后的条将具有较少的阴影，依此类推。但是，柱的数量是可变的。

我不想为每个条创建一个渐变（加上可变数量的条，这很难），我想做的是为每个条使用一个渐变。在 selectall 语句中，我可以编辑 def 部分中的渐变吗？类似的东西：

.attr("stop-color", function(d,i) "rgb("+50*i+","+50*i+","+50*i+")")"?

我想我需要在某处引用渐变的名称。这甚至可能吗？

【问题讨论】：

标签： javascript html css svg linear-gradients

【解决方案1】：

如果您的意思是希望有一个应用于一组对象的渐变，那么可以。这是可能的。您只需要使用绝对坐标定义渐变。为此，请使用gradientUnits="userSpaceOnUse"。

下面我定义了一个从 (0,0) 开始到 (0,400) 的渐变。位于 y=0 和 y=400 之间的所有对象都将使用该渐变的适当部分进行绘制。

<svg width="400px" height="400px">
  <defs>
    <linearGradient id="mygradient" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="0" y2="400">
      <stop offset="0" stop-color="red"/>
      <stop offset="1" stop-color="blue"/>
    </linearGradient>
  </defs>
  
  
  
  <g fill="url(#mygradient)" stroke="black" stroke-width="4">

    <rect x="5" y="5" width="390" height="90"/>
    <rect x="5" y="105" width="390" height="90"/>
    <rect x="5" y="205" width="390" height="90"/>
    <rect x="5" y="305" width="390" height="90"/>

  </g>

</svg>

【讨论】：

完美！正是我想要的。