Ich benutze eine If-Anweisung in SVG

Question

Ich möchte ein Musterbuch erstellen mit SVG, wie es scheint eine ziemlich lustige Sprache und ich frage mich, ob es eine Möglichkeit gibt, eine if statement statt alle verschiedenen Rechtecke aus einem zu tippen ein. Der Code, den ich habe, ist

<SVG width="1000" height="1000"> 
 
    <rect x="10" y="10" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="50" y="100" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="150" y="200" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="240" y="150" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="190" y="30" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="95" y="56" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="19" y="81" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="290" y="190" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="200" y="300" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="189" y="359" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="286" y="389" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="260" y="346" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="20" y="370" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="355" y="410" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="320" y="385" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="61" y="399" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="100" y="450" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="160" y="425" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
    <rect x="300" y="400" width="150" height="150" style="fill:white;stroke:black;stroke-width:1;opacity:1"/> 
 
</SVG>

Wie Sie sehen können, habe ich ein gutes Stück von Rechtecke angezeigt werden, was funktioniert, aber ich frage mich, ob es eine Möglichkeit, um eine if statement der Verwendung um es einfacher zu benutzen.

Answer 1

SVG keine Sprache ist. Aber Sie können Sprachen verwenden, um Ihr SVG zu erstellen. Zum Beispiel in einer HTML-Seite können Sie die SVG thusly bauen:

var mysvg = document.getElementById("mysvg"); 
 
var num = 20; 
 
while (num-- > 0) 
 
{ 
 
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
 
    rect.setAttribute("x", Math.random()*500); 
 
    rect.setAttribute("y", Math.random()*500); 
 
    rect.setAttribute("width", "150"); 
 
    rect.setAttribute("height", "150"); 
 
    rect.setAttribute("style", "fill:white;stroke:black;stroke-width:1;opacity:1"); 
 
    mysvg.appendChild(rect); 
 
}

<svg id="mysvg" width="1000" height="1000"> 
 
</svg>

Sie können auch die Javascript in das SVG einbetten, um es allein stehen und nicht auf HTML verlassen.

<svg id="mysvg" width="1000" height="1000" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <script type="application/ecmascript"> <![CDATA[ 
 
    var mysvg = document.getElementById("mysvg"); 
 
    var num = 20; 
 
    while (num-- > 0) 
 
    { 
 
     var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
 
     rect.setAttribute("x", Math.random()*500); 
 
     rect.setAttribute("y", Math.random()*500); 
 
     rect.setAttribute("width", "150"); 
 
     rect.setAttribute("height", "150"); 
 
     rect.setAttribute("style", "fill:white;stroke:black;stroke-width:1;opacity:1"); 
 
     mysvg.appendChild(rect); 
 
    } 
 
    ]]></script> 
 
</svg>

Answer 2

Sie scheinen eher eine Schleife als eine IF zu benötigen, aber SVG hat kein Konzept.

Sie können Ihre SVG mit einer Programmier- oder Vorlagensprache erstellen.

Zum Beispiel mit template toolkit (die Sie installieren und ausführen müssen, ist es nicht ein SVG-Funktion):

[% SET data = [ 
    { x="10", y="10", width="150", height="150" }, 
    { x="50", y="100", width="150", height="150" }, 
    { x="150", y="200", width="150", height="150" }, 
    { x="240", y="150", width="150", height="150" }, 
    { x="190", y="30", width="150", height="150" }, 
    { x="95", y="56", width="150", height="150" }, 
    { x="19", y="81", width="150", height="150" }, 
    { x="290", y="190", width="150", height="150" }, 
    { x="200", y="300", width="150", height="150" }, 
    { x="189", y="359", width="150", height="150" }, 
    { x="286", y="389", width="150", height="150" }, 
    { x="260", y="346", width="150", height="150" }, 
    { x="20", y="370", width="150", height="150" }, 
    { x="355", y="410", width="150", height="150" }, 
    { x="320", y="385", width="150", height="150" }, 
    { x="61", y="399", width="150", height="150" }, 
    { x="100", y="450", width="150", height="150" }, 
    { x="160", y="425", width="150", height="150" }, 
    { x="300", y="400", width="150", height="150" } 
]; %] 

<svg width="1000" height="1000"> 
    [% FOR item IN data %] 
     <rect x="[% item.x %]" 
       y="[% item.y %]" 
       width="[% item.width %]" 
       height="[% item.height %]" 
       style="fill:white;stroke:black;stroke-width:1;opacity:1" /> 
    [% END %] 
</svg>