---
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
challengeType: 6
videoUrl: ''
localeTitle: Invertir elementos SVG
---
## Description
Es posible que haya notado que el gráfico de barras parecía invertido o al revés. Esto se debe a cómo SVG utiliza las coordenadas (x, y). En SVG, el punto de origen para las coordenadas se encuentra en la esquina superior izquierda. Una coordenada x
de 0 coloca una forma en el borde izquierdo del área SVG. Una coordenada y
de 0 coloca una forma en el borde superior del área SVG. Los valores más altos de x
empujan el rectángulo hacia la derecha. Los valores más altos de y
empujan el rectángulo hacia abajo. Para hacer que las barras queden hacia arriba, debe cambiar la forma en que se calcula la coordenada y
. Debe tener en cuenta tanto la altura de la barra como la altura total del área SVG. La altura del área de SVG es 100. Si tiene un punto de datos de 0 en el conjunto, desearía que la barra comience en la parte inferior del área de SVG (no en la parte superior). Para hacer esto, la coordenada y
necesita un valor de 100. Si el valor del punto de datos fuera 1, comenzaría con una coordenada y
de 100 para establecer la barra en la parte inferior. Luego, debe tener en cuenta la altura de la barra de 1, por lo que la coordenada y
final sería 99. La coordenada y
que es y = heightOfSVG - heightOfBar
colocaría las barras del lado derecho hacia arriba.
## Instructions
Cambie la función de devolución de llamada para el atributo y
para establecer las barras del lado derecho hacia arriba. Recuerde que la height
de la barra es 3 veces el valor de los datos d
. Nota
En general, la relación es y = h - m * d
, donde m
es la constante que escala los puntos de datos.
## Tests
```yml
tests:
- text: El primer rect
debe tener un valor de y
de 64.
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first rect
should have a y
value of 64.");'
- text: El segundo rect
debe tener un valor de y
de 7.
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second rect
should have a y
value of 7.");'
- text: El tercer rect
debe tener un valor de y
de 34.
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third rect
should have a y
value of 34.");'
- text: El cuarto rect
debe tener un valor de y
de 49.
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth rect
should have a y
value of 49.");'
- text: El quinto rect
debe tener un valor de y
de 25.
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth rect
should have a y
value of 25.");'
- text: El sexto rect
debe tener un valor de y
de 46.
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth rect
should have a y
value of 46.");'
- text: El séptimo rect
debe tener un valor de y
de 13.
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh rect
should have a y
value of 13.");'
- text: El octavo rect
debe tener un valor de y
de 58.
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth rect
should have a y
value of 58.");'
- text: El noveno rect
debe tener un valor de y
de 73.
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth rect
should have a y
value of 73.");'
```
## Challenge Seed
## Solution
```js
// solution required
```