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

但我不知道如何改变条纹角度。我想要相同的角度，但水平翻转。

请有人帮帮我吗

感谢

Answer 1

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

改变背景svg的条纹角度

1 个答案: