Использование оператора If в SVG

Question

Я хочу создать книгу шаблонов, используя SVG, поскольку это выглядит довольно забавным языком, и мне было интересно, есть ли способ использовать if statement вместо того, чтобы печатать все разные прямоугольники один. Код, который у меня есть

<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>

Как вы можете видеть, у меня есть справедливый бит прямоугольники отображаются, который делает работу, но мне интересно, если есть способ с использованием if statement чтобы упростить его использование.

Answer 1

SVG не является языком. Но вы можете использовать языки для создания своего SVG. Например, в HTML-страницы, вы можете создать SVG таким образом:

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>

Вы также можете вставлять Javascript в SVG, чтобы сделать его автономно, а не полагаться на HTML.

<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

Вам, похоже, нужна петля, а не IF, но у SVG нет понятия.

Вы можете сгенерировать свой SVG с помощью языка программирования или шаблона.

Например, с template toolkit (который вам нужно будет установить и запустить, это не особенность SVG):

[% 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>