根据输入数据绘制svg矩形

Question

我必须创建这样一个程序，它根据输入数据绘制圆形和矩形。我的圆圈在起作用，但我不知道用矩形该怎么做。在矩形中，输入数据是矩形的2边长度。

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

您可以要求两边，并使用一些基数将其转换为像素，并设置宽度和高度(与圆半径相同(。

在这种情况下，可以是类似于边4和2的东西，并乘以100来创建宽度和高度。

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

svg/rect的参考：https://www.w3schools.com/graphics/svg_rect.asp