Gabonese Flag Fixer pt-br Explainer

Explicação do desafio Reparador da bandeira do Gabão

Objetivo do desafio: Use o método attribute .attr() para definir as posições 'x' e 'y' de um retângulo SVG.

Passo a passo da solução: O método attribute .attr() é usado para definir ou modificar os atributos das formas SVG. São necessários dois argumentos: o nome do atributo para mudar e o valor do atributo. Para definir a posição de um retângulo SVG, use .attr() para definir um valor tanto para 'x' quanto para 'y'. O atributo 'x' define o espaço à esquerda de um retângulo. O atributo 'y' define o espaço na parte superior de uma forma.

No código com o qual você começa, greenStripe já tem valores para 'x' e 'y', mas eles estão incorretos. Neste desafio, você mudará esses valores para que greenStripe esteja na posição correta.

Para concluir o desafio, altere os valores de 'x' e 'y' para 0.

Solução do código de exemplo:

(Toque abaixo para revelar)


greenStripe.attr('x',0).attr('y',0);

Conceitos de JavaScript: Variável

Conceitos de D3: Atributo

Código Adicional (código oculto executado antes do código do desafio):


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);