Урок №4. Рисование квадрата и круга с помощью SVG

Урок №4. Рисование круга и квадрата с помощью SVG

Степень завершённости урока: 60%

Статистика урока:

Количество фрагментов кода: 5
Количество полного кода: 3
Количество снимков: 2

В одном из предыдущих уроков я показал способ нарисовать линию с помощью SVG. Возьмём заготовку из того урока:

КОД:



<!DOCTYPE html>
<html>
   <head>
      <meta charset='utf-8'/>
      <title>Рисование круга и квадрата с помощью SVG</title>
   </head>
   <body>
      <svg>
         <line x1="10" y1="10" x2="200" y2="125" stroke="red"/>
      </svg>
   </body>
</html>

Вместо строчки

КОД:



<line x1="10" y1="10" x2="200" y2="125" stroke="red"/>

Напишем вот такую строчку кода

КОД:



<circle r="50"/>

Полностью код выглядит следующим образом:

КОД:



<!DOCTYPE html>
<html>
   <head>
      <meta charset='utf-8'/>
      <title>Рисование круга с помощью SVG</title>
   </head>
   <body>
      <svg>
       <circle r="50"/>
      </svg>
   </body>
</html>

А вот как выглядит отображение круга в браузере.

Круг отображается частично, т.к. его центр находится в точке 0, 0 по двум осям (верхний левый угол). Для того, чтобы круг был виден полностью, необходимо сместить его центр правее и ниже. Вот так будет выглядеть дополненный код.

КОД:



<!DOCTYPE html>
<html>
   <head>
      <meta charset='utf-8'/>
      <title>Рисование круга с помощью SVG</title>
   </head>
   <body>
      <svg>
         <circle cx="50" cy="50" r="50"/>
      </svg>
   </body>
</html>

Атрибуты cx и cy определяют смещение центра круга по оси "x" и оси "y" на 50 пикселей от левого верхнего угла.

Теперь в браузере отображается весь круг.

По аналогии с кругом (circle) для создания квадрата или прямоугольника необходимо использовать слово rect (сокращение от английского слова "rectangle", что ознает прямоугольник).

Страница обновлена 24 декабря 2023 года.