d3.js:转换SVG线性渐变中的颜色? [英] d3.js: Transition the colours in an SVG linear gradient?
本文介绍了d3.js:转换SVG线性渐变中的颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
正如标题所说:使用D3.js,是否可以转换线性渐变的颜色?
Just as the title says: with D3.js, is it possible to transition the colour of a linear gradient?
例如,如果我有这个渐变:
For example, if I have this gradient:
var gradient = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "yellow")
.attr("stop-opacity", 0.6);
gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "red")
.attr("stop-opacity", 0.6);
svg.append("svg:rect")
.attr("width", width)
.attr("height", 8)
.style("fill", "url(#gradient)");
我可以转换它成为一个从蓝色到红色而不是黄色到红色的渐变
Could I then transition it to become a gradient going from blue to red, rather than yellow to red?
推荐答案
是 - 更改渐变的定义与更改圆的位置或类似的东西没有什么不同作为D3。你可以用下面的代码做你想做的事。
Yes -- changing the definition of a gradient is no different to changing the position of a circle or something like that as far as D3 is concerned. You could do what you want for example with the following code.
gradient.select("stop")
.transition()
.attr("stop-color", "blue");
这篇关于d3.js:转换SVG线性渐变中的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文