Explicador de Corrector de la bandera gabonesa
**Objetivo de este acertijo **:
Usar el método de atributo .attr() para definir las posiciones 'x' e 'y' de un rectángulo SVG.
Tutorial de la solución:
El método de atributo .attr() se usa para definir o modificar los atributos de formas SVG. Toma dos argumentos: el nombre del atributo para cambiar y el valor del atributo. Para definir la posición de un rectángulo SVG, usa .attr() para definir el valor de 'x' e 'y'. El atributo 'x' define la cantidad de espacio a la izquierda de un rectángulo. El atributo 'y' define la cantidad de espacio en la parte superior de una forma.
En el código de inicio, greenStripe ya tiene valores para 'x' e 'y', pero son incorrectos. En este acertijo, cambiarás esos valores para que greenStripe esté en la posición correcta.
Para completar el acertijo, cambia los valores 'x' e 'y' a 0.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
greenStripe.attr('x',0).attr('y',0);
Conceptos de JavaScript: variable
Conceptos de D3: atributo
Código adicional (código oculto que se ejecuta antes del código del acertijo):
var greenStripe = svg.append('rect').attr('fill','#4CAF50').attr('width',90).attr('height',33);
var yellowStripe = svg.append('rect').attr('fill','#FFEB3B').attr('x',0).attr('y',33).attr('width',90).attr('height',33);
var blueStripe = svg.append('rect').attr('fill','#2196F3').attr('x',0).attr('y',66).attr('width',90).attr('height',33);