---
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
challengeType: 6
forumTopicId: 301488
localeTitle: Инвертировать элементы SVG
---
## Description
Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата x
из 0 помещает фигуру на левый край области SVG. Координата y
из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения x
нажимают прямоугольник вправо. Более высокие значения y
выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления y
координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата y
должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты y
из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата y
будет равна 99. Координата y
которая равна y = heightOfSVG - heightOfBar
, поместит бары вправо-вверх.
## Instructions
Измените функцию обратного вызова для атрибута y
чтобы установить бары вправо-вверх. Помните, что height
бара в 3 раза превышает значение d
. Заметка
В общем случае соотношение y = h - m * d
, где m
- постоянная, которая масштабирует точки данных.
## Tests
```yml
tests:
- text: The first rect
should have a y
value of 64.
testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3));
- text: The second rect
should have a y
value of 7.
testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3));
- text: The third rect
should have a y
value of 34.
testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3));
- text: The fourth rect
should have a y
value of 49.
testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3));
- text: The fifth rect
should have a y
value of 25.
testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3));
- text: The sixth rect
should have a y
value of 46.
testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3));
- text: The seventh rect
should have a y
value of 13.
testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3));
- text: The eighth rect
should have a y
value of 58.
testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3));
- text: The ninth rect
should have a y
value of 73.
testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3));
```
## Challenge Seed
## Solution
```html
// solution required
```