Skip to main content
Adicionando código-fonte
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Estou a utilizar um círculo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

Exemplo jsfiddle: https://jsfiddle.net/k3epungk/

Código-fonte:

//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>

Estou a utilizar um círculo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

Exemplo jsfiddle: https://jsfiddle.net/k3epungk/

Estou a utilizar um círculo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

Exemplo jsfiddle: https://jsfiddle.net/k3epungk/

Código-fonte:

//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>

Grafia e formatação
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Dividir circulocírculo SVG em 12 partes

Estou a utilisarutilizar um circulocírculo SVG e quero dividir com um lineline criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sinsin e coscos.

exemploExemplo jsfiddle: https://jsfiddle.net/k3epungk/

Dividir circulo SVG em 12 partes

Estou a utilisar um circulo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

exemplo jsfiddle: https://jsfiddle.net/k3epungk/

Dividir círculo SVG em 12 partes

Estou a utilizar um círculo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

Exemplo jsfiddle: https://jsfiddle.net/k3epungk/

Fonte Link
akm
  • 3,4mil
  • 7
  • 31
  • 53

Dividir circulo SVG em 12 partes

Estou a utilisar um circulo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

exemplo jsfiddle: https://jsfiddle.net/k3epungk/