Color Blender pt-br Explainer

Explicação de Misturador de cores

Objetivo do desafio: Definir a posição de um círculo, modificando seus atributos 'cx' e 'cy'.

Passo a passo da solução: A posição da tela de um círculo SVG é definida por seus atributos 'cx' e 'cy'. O atributo 'cx' define a distância do lado esquerdo da tela até o meio do círculo e o 'cy' define a distância da parte superior da tela até o meio do círculo.

Neste desafio, defina os atributos 'cx' e 'cy' dos três círculos para fazê-los se sobrepor.

Solução do código de exemplo:


redCircle.attr('cx', 130);

greenCircle.attr('cy', 110);

blueCircle.attr('cx', 170);

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


const svg = canvas.append('g');

svg.style('isolation', 'isolate');

const redCircle = svg.append('circle').attr('r', 45).attr('cx', 50).attr('cy', 150).attr('fill', '#FF0000').style('mix-blend-mode', 'screen');

const greenCircle = svg.append('circle').attr('r', 45).attr('cx', 150).attr('cy', 50).attr('fill', '#00FF00').style('mix-blend-mode', 'screen');

const blueCircle = svg.append('circle').attr('r', 45).attr('cx', 250).attr('cy', 150).attr('fill', '#0000FF').style('mix-blend-mode', 'screen');