Color part of a circle SVG

Question

Color part of a circle SVG

Navigation

#1 by (1 votes)

5

I'm creating a circle in SVG. With a for loop, I want to create multiple lines to color a certain part of the circle, without going over it (for example half the circle.) The x1 and y1 line points always have the same value, changing only of x2 and y2 of each line created. How can I solve the problem?

Example jsfiddle: link

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>

javascript svg

asked by anonymous 17.04.2015 / 17:18

1 answer

301 redirect out of domain with htaccess Image rotation does not work correctly in Chrome

score 1 · Answer 1

Using masks seems like 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>