Coloring part of an SVG circle

Question

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>

Answer 1

Use masks seems the best option:

  
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);
    
    //criar Definições de máscara
    var newDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    svg.appendChild(newDefs);    
    var newMask = document.createElementNS('http://www.w3.org/2000/svg', 'mask');
    newMask.setAttributeNS(null, 'id', 'maskCircle');    
    newCircle = document.createElementNS('http://www.w3.org/2000/svg', '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');        
    newMask.appendChild(newCircle);
    newDefs.appendChild(newMask);
}
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");
        //line.setAttributeNS(null, 'mask', "url(#maskCircle)");//aqui a máscara não funciona bem
        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");
        line.setAttributeNS(null, 'mask', "url(#maskCircle)");//aqui a máscara funciona bem
        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>