Divide SVG circle into 12 parts

Question

Divide SVG circle into 12 parts

Navigation

#1 by (13 votes)

9

I'm using an SVG circle and I want to split it with a line created dynamically in 12 parts. I can only divide into 4 parts, through its radius. I know it is possible through sin and cos .

Example jsfiddle: link

Source code:

//raio circulo
r=50;

var circle = document.getElementById("circle");
circle.setAttribute("cx",100);
circle.setAttribute("cy",100);
circle.setAttribute("r",r);

//posiçao
x=100;
y=100;

var array_y1=[(y - r)+10,y,(y + r)+10,y]; 
var array_y2=[(y - r)-10,y,(y + r)-10,y]; 

var array_x1=[x,(x + r)+10,x,(x - r)+10]; 
var array_x2=[x,(x + r)-10,x,(x - r)-10]; 

var svg = document.getElementById('svg');
		
for(var i=0;i<=3;i++){
    
    var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
    newLine.setAttributeNS(null,'id','line'+i);
    newLine.setAttributeNS(null,'x1',array_x1[i]);
    newLine.setAttributeNS(null,'y1',array_y1[i]);
    newLine.setAttributeNS(null,'x2',array_x2[i]);
    newLine.setAttributeNS(null,'y2',array_y2[i]);
    newLine.setAttributeNS(null,"stroke","black");
    newLine.setAttributeNS(null,"stroke-width","1");
    svg.appendChild(newLine);
}

<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

javascript svg

asked by anonymous 16.04.2015 / 11:31

1 answer

Remove more than one item from an array How to count number of checkboxes selected

score 13 · Accepted Answer

I have. Here's the fiddle: link

And here's the source code. You can run it right here with the blue ► Run button below:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}

<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>