Как рассчитать линейный градиент SVG - PullRequest
Новая
       37

Как рассчитать линейный градиент SVG

1 голос
/ 03 июня 2019

Если у меня прямая линия с наклоном вверх, можно ли установить градиентную заливку так, чтобы она была красной, когда кривая линия ниже прямой, и синей, когда вверху. Ниже приведены две строчные функции и генератор функций области d3 и связанные с ними массивы. 

//global Variables:

var trendGrowthX =[0,1,2,3,4,5,6,7,8,9,10];
var trendGrowthY = [2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7];
var actualX = [0,1,2,3,4,5,6,7,8,9,10];
var actualY = [2,4.3,5.5,3.5,2,3,5.5,7.5,6.5,5.5,5];


//D3 path generator functions:

 function addTrend(){
 var trendLine = d3.line()
 .x(function(d,i,a){return xScale(trendGrowthX[i]);})
 .y(function(d,i,a){return xScale(trendGrowthY[i]);})
}

function addActual(){
 var actualIncome = d3.line()
 .x(function(d,i,a){return xScale(actualX[i])})
 .y(function(d,i,a){return yScale(actualY[i])})
 .curve(d3.curveCatmullRom.alpha(0.5))

 g.append("path").attr("d",actualIncome(actualX))
 .style("stroke","green")
 .style("stroke-width",3)

}

function addArea(){
 var area = d3.area()
 .attr("x1",function(d,i,a){return xScale(actualX[i]); })
 .attr("y1",function(d,i,a){return xScale(actualY[i]); })
 .attr("y0",function(d,i,a){return xScale(trendGrwothY[i]); })
 .attr("x0",function(d,i,a){return xScale(trendGrowthX[i]); })

 g.append("path")
 .attr("d",function(d,i,a){ area(actualX)})
 .style("fill","url(#area-gradient)")
 .attr("pointer-events","none")
}

current output

1 Ответ

0 голосов
/ 04 июня 2019

SVG имеет свойство transformGradient, позволяющее вам управлять линейным градиентом, используя стандартные инструкции преобразования, решение приведено ниже: 

var gradient = d3.select("#area- gradient").attr("gradientTransform",`rotate(-18),${xScale(trendGrowthX[5]),${yScale(trendGrowthY[5])})`);
...