javascript - 在 SVG 中创建可变渐变

Question

是否可以使用 SVG 对象创建可变渐变？这是我正在尝试做的事情:

我有一个水平条形图，我想对其应用阴影。所以最上面的条会有最多的阴影，而在那之后的条则阴影较少，依此类推。但是，条的数量是可变的。

我不想为每个条形图创建一个渐变(加上可变数量的条形图，这很困难)，我想做的是为每个条形图使用一个渐变。在 selectall 语句中，我可以编辑 def 部分中的渐变吗？像这样的东西:

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

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

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