--- id: 587d7fa8367417b2b2512bcc title: Відображення форм за допомогою SVG challengeType: 6 forumTopicId: 301485 dashedName: display-shapes-with-svg --- # --description-- На останньому завданні ми створили елемент `svg` із заданою шириною та висотою, який був помітний, оскільки до нього застосовано `background-color` в тезі `style`. Для заданої ширини та висоти код створює місце. Наступним кроком є створення форм для розміщення в області `svg`. У SVG існує ряд підтримуваних форм, таких як прямокутники та кола. Їх використовують для відображення даних. Наприклад, форма SVG прямокутника (``) може створити елемент у стовпчиковій діаграмі. Коли ви розміщуєте форму в області `svg`, ви можете вказати, куди вона рухається, з координатами `x` та `y`. Початок координат (0, 0) знаходиться у верхньому лівому куті. Додатні значення для `x` переміщують форму праворуч, а додатні значення для `y` переміщують форму вниз від початку координат. Щоб розмістити форму посередині 500 (ширина) x 100 (висота) `svg` з останнього завдання, координата `x` буде 250, а `y` координата буде 50. SVG `rect` має чотири атрибути. Існують координати `x` та `y`, де вони розміщені в області `svg`. Він також має `height` та `width` для визначення розміру. # --instructions-- Додайте форму `rect` до `svg` використовуючи `append()`, і надайте атрибуту `width` `25` і `height` `100`. Також надайте `rect` атрибутам `x` і `y`, для кожного встановлено значення `0`. # --hints-- Ваш документ має мати 1 елемент `rect`. ```js assert($('rect').length == 1); ``` Елемент `rect` має мати встановлений атрибут `width` `25`. ```js assert($('rect').attr('width') == '25'); ``` Елемент `rect` має мати встановлений атрибут `height` `100`. ```js assert($('rect').attr('height') == '100'); ``` Елемент `rect` має мати встановлений атрибут `x` `0`. ```js assert($('rect').attr('x') == '0'); ``` Елемент `rect` має мати встановлений атрибут `y` `0`. ```js assert($('rect').attr('y') == '0'); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```