2

// получилось нарисовать прямоугольник
<svg width="540" height="290">
  <polygon points='30,30 0,60 60,60'/>
</svg>

Объясните как использовать атрибут points знаю что сперва идет x а затем y в примере будет первое число 10 - x а второе 40 это y Нарисовать фигуру прямоугольник не получается

<svg width="540" height="290">
  <polygon points='10,40 10,20 45,20'/>
</svg>

Требую Alexandr_TT в студию ну пожалуйста

2
  • у нас есть {специализированный чат по svg}(chat.stackexchange.com/rooms/70612/svg-chat) там можно, комфортно обсуждать вопросы, как вы делали здесь в комментариях. Кто-нибудь, да ответит. Я, в летний период, подолгу и часто отсутствую на сайте. Плюсик вам за вопрос. Удачи в освоении SVG 2 июн 2019 в 5:33
  • Благодарю, подправил 2 июн 2019 в 13:03

1 ответ 1

4

Система координат в svg начинается слева сверху

введите сюда описание изображения

В прямоугольнике 4 точки, атрибут points тега <polygon> принимает последовательность узловых точек многоугольника, то есть в Вашем случае 4 вершины желаемого прямоугольника

polygon{
  stroke-width:4px;
  fill:wheat;
  stroke:red;
}
<svg width="540" height="290">
  <polygon points='10,10 10,200 200,200 200,10'/>
</svg>

Вот пример размещения точек при рисовании шестиугольника

введите сюда описание изображения

polygon{
  stroke-width:4px;
  fill:wheat;
  stroke:red;
}
<svg width="400" height="400" >
  <polygon points='250,300 280,350 340,350 370,300 340,250 280,250'/>
  <polygon points='250,300 280,350 340,350 370,300 340,250 280,250'
           transform="translate(-200,-200)" />
</svg>

PS: фигуры можно двигать поворачивать и масштабировать атрибутом transform, я добавил второй шестиугольник с теми же координатами и подвинул его влево и вверх на 200 пикселей

transform="translate(-200,-200)"
1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.