5
I’m creating a circle in SVG. With a cycle for
, I want to create several lines to color a certain part of the circle, without exceeding the same (for example half of the circle.) The point x1
and y1
of the line always have the same value, changing only the x2
and y2
of each line created. How can I solve the problem?
Example jsfiddle: https://jsfiddle.net/4un1j8mw/1/
Source code:
function create_circ(rayon,cx_circle,cy_circle){
var svg = document.getElementById('svg');
var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
newCircle.setAttributeNS(null, 'id', 'circle');
newCircle.setAttributeNS(null,'cx', cx_circle);
newCircle.setAttributeNS(null,'cy', cy_circle);
newCircle.setAttributeNS(null,'r', rayon);
newCircle.setAttributeNS(null,'stroke-width', 2);
newCircle.setAttributeNS(null,'stroke', 'black');
newCircle.setAttributeNS(null,'fill', 'white');
svg.appendChild(newCircle);
}
var id_circle = document.getElementById("circle");
var rayon = 100;
var diametre = rayon*2;
var cx_circle = 150;
var cy_circle = 150;
var array_x1 = [cx_circle];
var array_y1 = [cy_circle-rayon];
var array_x2 = [cx_circle];
var array_y2 = [cy_circle+rayon];
function create_line(){
for(i=0;i<=0;i++){ //juste une ligne
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttributeNS(null, 'x1', array_x1[i]);
line.setAttributeNS(null, 'y1', array_y1[i]);
line.setAttributeNS(null, 'x2', array_x2[i]);
line.setAttributeNS(null, 'y2', array_y2[i]);
line.setAttributeNS(null, 'id', "line"+i);
line.setAttributeNS(null, "stroke", "red");
line.setAttributeNS(null, "stroke-width", "2");
svg.appendChild(line);
}
}
//ligne
var r1 = rayon-(rayon/10);
var r2 = rayon+(rayon/10);
//var r2 = diametre+5;
//calcule sin et cos
var a = Math.sqrt(3) / 2;
console.log(a);
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];
function line_paint(){
for(i=0;i<200;i++){ //juste une ligne
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttributeNS(null, 'x1', cx_circle);
line.setAttributeNS(null, 'y1', cy_circle);
line.setAttributeNS(null, 'x2',150+(2*i));
line.setAttributeNS(null, 'y2',(cx_circle-rayon));
line.setAttributeNS(null, 'id', "l"+i);
line.setAttributeNS(null, "stroke", "yellow");
line.setAttributeNS(null, "stroke-width", "6");
svg.appendChild(line);
}
}
var svg = document.getElementById('svg');
//creé circle
create_circ(rayon,cx_circle,cy_circle);
create_line();
line_paint();
<svg id="svg" width="100%" height="800">
</svg>