Блог

Главная - Вопросы по программированию - Нарисовать прямоугольник svg из входных данных

Нарисовать прямоугольник svg из входных данных

#javascript #html #svg

#javascript #HTML #svg

Вопрос:

Я должен создать такую программу, которая рисует круг и прямоугольник из входных данных. Мой круг работает, но я не знаю, как мне это сделать с помощью rectangle. В прямоугольнике входные данные представляют собой длину стороны прямоугольника в 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>

Ответ №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

Комментарии:

1. W3Schools — это зло. Использовать developer.mozilla.org/en-US/docs/Web/SVG/Element/rect вместо этого