改变条纹角度

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