jeudi 22 mars 2018

courbes onclick



<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" id="svgCourbes2" onclick="multicourbes2()"></svg>

<script>
function multicourbes2() {
var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 1; i++) {
var x1 = Math.floor(200*Math.random());
var x2 = Math.floor(200*Math.random())+200;
var y1 = Math.floor(400*Math.random());
var y2 = Math.floor(400*Math.random());

var g1 = document.createElementNS(svgns, 'g');

var path1 = document.createElementNS(svgns, 'path');
    path1.setAttribute('d', 'm'+x1+','+y1+'C'+x1+','+y1+' 0,200 200,200C400,200 '+x2+','+y2+' '+x2+','+y2+'z');
    path1.setAttribute('fill', 'none');
    path1.setAttribute('stroke', 'black');
    path1.setAttribute('stroke-width', '0.5');
    path1.setAttribute('stroke-dasharray', '600');
    path1.setAttribute('opacity', '0.5');

var path2 = document.createElementNS(svgns, 'path');
    path2.setAttribute('d', 'm'+x2+','+y2+'C'+x2+','+y2+' 0,200 200,200C400,200 '+x1+','+y1+' '+x1+','+y1+'z');
    path2.setAttribute('fill', 'none');
    path2.setAttribute('stroke', 'black');
    path2.setAttribute('stroke-width', '0.5');
    path2.setAttribute('opacity', '0.5');

    g1.appendChild(path1);
    g1.appendChild(path2);
    svgCourbes2.appendChild(g1);
}}
multicourbes2()
</script>