改變條紋角度

Question

從來就從得到一個代碼：[SVGeneration.com]斜條紋

這樣的：

function generate(inputArray){ 
    var scale = inputArray['scale']; 
    var width = inputArray['stripe-width']; 
    var background = inputArray['background']; 
    var stripe = inputArray['stripe']; 
    return "<svg xmlns='http://www.w3.org/2000/svg' width='"+scale+"' height='"+scale*2+"' viewBox='0 0 5 10'>\n"+ 
    " <rect width='110%' x='-5%' y='-5%' height='110%' fill='#"+background+"'/>\n"+ 
    " <line x1='-2' y1='1' x2='7' y2='10' stroke='#"+stripe+"' stroke-width='"+width+"'/>\n"+ 
    " <line x1='-2' y1='6' x2='7' y2='15' stroke='#"+stripe+"' stroke-width='"+width+"'/>\n"+ 
    " <line x1='-2' y1='-4' x2='7' y2='5' stroke='#"+stripe+"' stroke-width='"+width+"'/>\n"+ 
    "</svg>"; 
} 

但我不知道如何改變條紋的角度去。我想要相同的角度，但水平翻轉。

有誰幫我請

感謝

Answer 1

在inputArray參數（例如翻蓋式布爾字段）傳遞一個額外的價值。當該值爲真時，交換原始的x1和x2值。例如...

function generate(inputArray){ 
    var scale = inputArray['scale']; 
    var width = inputArray['stripe-width']; 
    var background = inputArray['background']; 
    var stripe = inputArray['stripe']; 
    var flip = inputArray['flip']; 
    var x1 = (flip ? 7 : -2); 
    var x2 = (flip ? -2 : 7); 
    return "<svg xmlns='http://www.w3.org/2000/svg' width='"+scale+"' height='"+scale*2+"' viewBox='0 0 5 10'>\n"+ 
    " <rect width='110%' x='-5%' y='-5%' height='110%' fill='#"+background+"'/>\n"+ 
    " <line x1='"+x1+"' y1='1' x2='"+x2+"' y2='10' stroke='#"+stripe+"' stroke-width='"+width+"'/>\n"+ 
    " <line x1='"+x1+"' y1='6' x2='"+x2+"' y2='15' stroke='#"+stripe+"' stroke-width='"+width+"'/>\n"+ 
    " <line x1='"+x1+"' y1='-4' x2='"+x2+"' y2='5' stroke='#"+stripe+"' stroke-width='"+width+"'/>\n"+ 
    "</svg>"; 
}