--- id: 587d7fa9367417b2b2512bd0 title: Інвертування SVG елементів challengeType: 6 forumTopicId: 301488 dashedName: invert-svg-elements --- # --description-- Можливо, Ви помітили, що стовпчикова діаграма виглядає ніби перевернута або інвертована. Це пов'язано зі способом використання (x, y) координат у SVG. Початком координат у SVG виступає точка, розташована у верхньому лівому куті. Вісь 0 `x` розміщує фігуру у лівій частині площини SVG. Вісь 0 `y` розміщує фігуру у верхній частині площини SVG. Чим вище значення осі `x`, тим більше прямокутник зсувається вправо. Чим вище значення осі `y`, тим більше прямокутник опускається вниз. Щоб розмістити стовпчик праворуч зверху, необхідно змінити обчислення `y` координати. Треба враховувати як висоту стовпчика, так і загальну висоту SVG площини. Висота площини SVG дорівнює 100. Припустимо, що у Вас задана точка 0, а Ви хотіли б, щоб стовпчик починався у нижній частині площини SVG (не зверху). Для цього, значення `y` координати має бути 100. Якби значення точки було 1, тоді, щоб задати стовпчик знизу, ми б брали за початкове значення `y` координати 100. Враховуємо висоту стовпчика 1, в такому випадку значення осі `y` становитиме 99. Застосовуючи цю формулу `y = heightOfSVG - heightOfBar` для обчислення значення `y` координати, розміщуємо стовпчики у правій верхній частині площини. # --instructions-- Змініть функцію зворотного відліку для атрибуту `y`, щоб встановити стовпчики праворуч зверху. Пам'ятайте, що `height` стовпчика у 3 рази перевищує значення `d`. **Примітка:** Співвідношення має такий вигляд: `y = h - m * d`, де `m` константа, яка масштабує значення точок. # --hints-- Перший `rect` повинен мати значення `y` `64`. ```js assert($('rect').eq(0).attr('y') == h - dataset[0] * 3); ``` Другий `rect` повинен мати значення `y` `7`. ```js assert($('rect').eq(1).attr('y') == h - dataset[1] * 3); ``` Третій `rect` повинен мати значення `y` `34`. ```js assert($('rect').eq(2).attr('y') == h - dataset[2] * 3); ``` Четвертий `rect` повинен мати значення `y` `49`. ```js assert($('rect').eq(3).attr('y') == h - dataset[3] * 3); ``` П'ятий `rect` повинен мати значення `y` `25`. ```js assert($('rect').eq(4).attr('y') == h - dataset[4] * 3); ``` Шостий `rect` повинен мати значення `y` `46`. ```js assert($('rect').eq(5).attr('y') == h - dataset[5] * 3); ``` Сьомий `rect` повинен мати значення `y` `13`. ```js assert($('rect').eq(6).attr('y') == h - dataset[6] * 3); ``` Восьмий `rect` повинен мати значення `y` `58`. ```js assert($('rect').eq(7).attr('y') == h - dataset[7] * 3); ``` Дев'ятий `rect` повинен мати значення `y` `73`. ```js assert($('rect').eq(8).attr('y') == h - dataset[8] * 3); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```