--- id: 587d7fa8367417b2b2512bcc title: Display Shapes with SVG challengeType: 6 videoUrl: '' localeTitle: Mostrar formas con SVG --- ## Description
El último desafío creó un elemento svg con un ancho y alto dado, que era visible porque tenía un background-color aplicado en la etiqueta de style . El código hizo espacio para el ancho y alto dado. El siguiente paso es crear una forma para colocar en el área de svg . Hay una serie de formas compatibles en SVG, como rectángulos y círculos. Se utilizan para mostrar datos. Por ejemplo, una forma SVG rectangular ( <rect> ) podría crear una barra en un gráfico de barras. Cuando coloca una forma en el área de svg , puede especificar a dónde va con las coordenadas x e y . El punto de origen de (0, 0) está en la esquina superior izquierda. Los valores positivos para x empujan la forma hacia la derecha, y los valores positivos para y empujan la forma hacia abajo desde el punto de origen. Para colocar una forma en el medio del svg 500 (ancho) x 100 (altura) del último desafío, la coordenada x sería 250 y la coordenada y sería 50. Un rect SVG tiene cuatro atributos. Existen las coordenadas x e y donde se coloca en el área de svg . También tiene una height y width para especificar el tamaño.
## Instructions
Agregue una forma rect a la svg usando append() , y asigne un atributo de width de 25 y un atributo de height de 100. Además, rect atributos rect x e y cada conjunto a 0.
## Tests
```yml tests: - text: Su documento debe tener 1 elemento rect . testString: 'assert($("rect").length == 1, "Your document should have 1 rect element.");' - text: El elemento rect debe tener un atributo de width establecido en 25. testString: 'assert($("rect").attr("width") == "25", "The rect element should have a width attribute set to 25.");' - text: El elemento rect debe tener un atributo de height establecido en 100. testString: 'assert($("rect").attr("height") == "100", "The rect element should have a height attribute set to 100.");' - text: El elemento rect debe tener un atributo x establecido en 0. testString: 'assert($("rect").attr("x") == "0", "The rect element should have an x attribute set to 0.");' - text: El elemento rect debe tener un atributo y establecido en 0. testString: 'assert($("rect").attr("y") == "0", "The rect element should have a y attribute set to 0.");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```