如果我们知道角度，计算SVG线性梯度属性x1 y1 x2 y2？

Question

我们知道在SVG角线性梯度是通过设置属性X1，X2，Y1，Y2。然而，如果我们只拿到角度，

1.how计算X1，Y1，X2，Y2的结果呢？

2.is它正确，此式黄褐色（角度）=（Y2-Y1）/（X2-X1）？我如何计算所有参数。

Answer 1

集x_i，y_i仿佛角度为0度，并通过gradientTransform属性（gradientTransform="rotate(angle)"）来应用旋转，

Answer 2

下应该得到你所需要的，或接近它。要点是它在你的旋转区域内创建一个起点和终点，结果将是一组你可以使用的单位矢量（即在0.0到1.0之间）。其中inputAngle是您希望渐变的角度。

function pointOfAngle(a) { 
    return {x:Math.cos(a), 
      y:Math.sin(a)}; 
} 

function degreesToRadians(d) { 
    return ((d * Math.PI)/180); 
} 

var eps = Math.pow(2, -52); 
var inputAngle = 45; 
var angle = (inputAngle % 360); 
var startPoint = pointOfAngle(degreesToRadians(180 - angle)); 
var endPoint = pointOfAngle(degreesToRadians(360 - angle)); 

// if you want negative values you can remove the following checks 
// but most likely it will produce undesired results 
if(startPoint.x <= 0 || Math.abs(startPoint.x) <= eps) 
    startPoint.x = 0; 

if(startPoint.y <= 0 || Math.abs(startPoint.y) <= eps) 
    startPoint.y = 0; 

if(endPoint.x <= 0 || Math.abs(endPoint.x) <= eps) 
    endPoint.x = 0; 

if(endPoint.y <= 0 || Math.abs(endPoint.y) <= eps) 
    endPoint.y = 0; 

不知道的线性渐变值是如何使用SVG，但是你可能需要通过你的元素大小相乘...

x1 = startPoint.x * width 
y1 = startPoint.y * height 
x2 = endPoint.x * width 
y2 = endPoint.y * height 

Answer 3

建设关JT-的答案，这里是一个函数，将完全符合你在Javascript中需要的。只需调用此函数将元素和度作为整数传递。我还添加了“左”，“右”，“上”，“下”作为可选参数。

function svg_linear_gradient_direction(element, direction){ 

    if(direction === "left"){ 

     element.setAttributeNS(null, "x1", "100%"); 
     element.setAttributeNS(null, "y1", "0%"); 
     element.setAttributeNS(null, "x2", "0%"); 
     element.setAttributeNS(null, "y2", "0%"); 

    } else if(direction === "right"){ 

     element.setAttributeNS(null, "x1", "0%"); 
     element.setAttributeNS(null, "y1", "0%"); 
     element.setAttributeNS(null, "x2", "100%"); 
     element.setAttributeNS(null, "y2", "0%"); 

    } else if(direction === "down"){ 

     element.setAttributeNS(null, "x1", "0%"); 
     element.setAttributeNS(null, "y1", "0%"); 
     element.setAttributeNS(null, "x2", "0%"); 
     element.setAttributeNS(null, "y2", "100%"); 

    } else if(direction === "up"){ 

     element.setAttributeNS(null, "x1", "0%"); 
     element.setAttributeNS(null, "y1", "100%"); 
     element.setAttributeNS(null, "x2", "0%"); 
     element.setAttributeNS(null, "y2", "0%"); 

    } else if(typeof direction === "number"){ 

     var pointOfAngle = function(a) { 
      return { 
       x:Math.cos(a), 
       y:Math.sin(a) 
      }; 
     } 

     var degreesToRadians = function(d) { 
      return ((d * Math.PI)/180); 
     } 

     var eps = Math.pow(2, -52); 
     var angle = (direction % 360); 
     var startPoint = pointOfAngle(degreesToRadians(180 - angle)); 
     var endPoint = pointOfAngle(degreesToRadians(360 - angle)); 

     if(startPoint.x <= 0 || Math.abs(startPoint.x) <= eps) 
      startPoint.x = 0; 

     if(startPoint.y <= 0 || Math.abs(startPoint.y) <= eps) 
      startPoint.y = 0; 

     if(endPoint.x <= 0 || Math.abs(endPoint.x) <= eps) 
      endPoint.x = 0; 

     if(endPoint.y <= 0 || Math.abs(endPoint.y) <= eps) 
      endPoint.y = 0; 

     element.setAttributeNS(null, "x1", startPoint.x); 
     element.setAttributeNS(null, "y1", startPoint.y); 
     element.setAttributeNS(null, "x2", endPoint.x); 
     element.setAttributeNS(null, "y2", endPoint.y); 
    } 
}