是否可以使用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/