是否可以使用SVG对象创建变量渐变?这是我想做的事情:

我有一个水平条形图,我想对其应用阴影。因此,最顶部的条形阴影最多,而其后的条形阴影较少,依此类推。但是,条数是可变的。

我不想为每个酒吧创建一个渐变(加上很难改变的酒吧数量),我想做的是为每个酒吧使用一个渐变。在selectall语句中,我可以编辑def部分中的渐变吗?就像是:

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

我想我需要在某个地方引用渐变的名称。这有可能吗?

最佳答案

如果您的意思是希望具有适用于一组对象的渐变,则可以。那是可能的。您只需要使用绝对坐标定义渐变即可。为此,请使用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>
                                                    

关于javascript - 在SVG中创建变量渐变,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31736499/

10-12 00:21
查看更多