css - 更改背景 svg 的条纹 Angular

Question

我有一个代码来自:[SVGeneration.com] DIAGONAL STRIPE

这个:

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

但我不知道如何更改条纹的 Angular 。我想要相同的 Angular 但水平翻转。

谁能帮帮我

谢谢

Answer 1

在 inputArray 参数中传递一个额外的值(例如 bool 类型的翻转字段)。当该值为真时，交换原始 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>";
}