SVG直線勾配属性x1 y1 x2 y2を計算します。

Question

SVGでわかるように、角度の直線勾配は属性x1、x2、y1、y2を設定します。しかし、我々は角度を取得する場合、

1. x1、y1、x2、y2の結果を計算するには？

2.tan（angle）=（y2-y1）/（x2-x1）？どのようにすべてのパラメータを計算できますか？角度が0度だったとgradientTransform属性（gradientTransform="rotate(angle)"）によって回転を適用するかのように

Answer 1

設定x_i、y_i、

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で必要なものを正確に実行する関数です。要素と度を整数として渡すだけでこの関数を呼び出してください。私はオプション引数として "left"、 "right"、 "up"、 "down"を追加しました。

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); 
    } 
}