計算傾斜重複行的SVG梯度座標

我正在嘗試在SVG中生成一個平行四邊形，重複的行與多邊形的左側和右側具有相同的角度。事情是這樣的：計算傾斜重複行的SVG梯度座標

我得到了重複梯度工作，但我不能讓線條的角度權。他們從邊界平行的角度傾斜：/（x2，y2）

我知道我可以操控基於（X1，Y1）的角度屬性漸變的，但只是打數字並不適合我。如何計算給定已知角度的哪些值用於這些屬性？

下面是SVG代碼，我現在所擁有的：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 1680 550" preserveAspectRatio="xMidYMin"> 
    <defs> 
     <linearGradient id="StripedGradient" spreadMethod="repeat" x1="0%" x2="1%" y1="0%" y2="1%"> 
      <stop stop-color="yellow" offset="0%" /> 
      <stop stop-color="yellow" offset="15%" /> 
      <stop stop-color="transparent" offset="15%" /> 
      <stop stop-color="transparent" offset="100%" /> 
     </linearGradient> 
    </defs> 
    <polygon fill="url(#StripedGradient)" points="0 550, 415 145, 610 145, 195 550" /> 
</svg>

這個角度當前工作被證明只是下45deg（44.301 ...），但價值可以在設計師的判斷髮生變化，所以...

（我真的很新的SVG，在我知道它的存在，但我從來沒有手寫聯SVG直到今天。）

來源

2015-10-15 RJ Cuthbertson

一個相當簡單的方法是定義你的漸變作爲橫條紋。如果您還使用gradientUnits="userSpaceOnUse"，則可以使用gradientTransform來設置角度。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
 
    viewBox="0 0 750 550" preserveAspectRatio="xMidYMin"> 
 
    <defs> 
 
     <linearGradient id="StripedGradient" spreadMethod="repeat" 
 
         gradientUnits="userSpaceOnUse" 
 
         x1="0" y1="0" x2="0" y2="20" 
 
         gradientTransform="rotate(-44.301)"> 
 
      <stop stop-color="red" offset="0%" /> 
 
      <stop stop-color="red" offset="15%" /> 
 
      <stop stop-color="transparent" offset="15%" /> 
 
      <stop stop-color="transparent" offset="100%" /> 
 
     </linearGradient> 
 
    </defs> 
 
    <polygon fill="url(#StripedGradient)" points="0 550, 415 145, 610 145, 195 550" /> 
 
</svg>

來源

2015-10-16 06:10:27

計算傾斜重複行的SVG梯度座標

回答

相關問題