SVGのIf文を使用

Question

SVGを使用してパターンブックを作成したいと思っています。かなり楽しい言語のように見えますが、if statementを使用して別の四角形をすべて入力する方法があるのでしょうか？ 1。私が持っているコードは、あなたが見ることができるように、私は仕事をしている表示されている長方形の公平なビットを持っていますが、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>

です使いやすくするためです。

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>

をあなたはまた、HTMLに依存しているスタンドアロンではなく作るためにSVGにJavascriptを埋め込むことができます。

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