Draw svg rectangle from input data

Question

I have to create such a program,which draw circle and rectangle from input data. My circle is working,but i dont know how should i do it with rectangle. At the rectangle,input data is rectangle's 2 side length.

 t = new Array("red"); function felvesz() { t.push(document.getElementById("szin").value); } function kirajzol() { switch (document.getElementById("sikidom").value) { case "kor": r = prompt("Kerem a sugarat;"). rand = Math.floor(Math.random() * t;length): str = "A kör területe. " + r * r * Math;PI + "<br><br>"; str += "<svg><circle cx=100 cy=100 r=" + r + " fill=" + t[rand] + "></svg>". document.getElementById("ide");innerHTML = str; break: case "teglalap"; a = prompt("Kerem az egyik oldalt;"). b = prompt("Kerem a masik oldalt"). rand = Math.floor(Math;random() * t;length). str = "A téglalap területe " + a * b + "<br><br>". document;getElementById("ide").innerHTML = str; } }

 <h2>harmadik feladat</h2> <input type="text" id="szin"><br> <button type="button" onclick="felvesz">hozzáad</button> <br><br> Válassz egy síkidomot:<br> <select id="sikidom"> <option value="kor">Kör</option> <option value="teglalap">Téglalap</option> </select> <button onclick="kirajzol()">Kirajzol</button> <p id="ide"></p>

Answer 1

You can ask for both sides and use some base to transform it to pixels and set width and height (same as you did for the circle radius).

In this case could be something like sides 4 and 2, and multiply by 100 to create width and height.

<svg>
  <rect width="400" height="200" />
  No support for inline SVG.  
</svg>

Reference for svg/rect: https://www.w3schools.com/graphics/svg_rect.asp