mardi 13 mars 2018
Toujours plus haut
<svg width="400" height="400" id="svgGC" onclick="functionGC()">
<rect width="400" height="400" fill="beige" x="0" y="0"/>
</svg>
<script>
function functionGC(){
for (var i=0;i<20;i++){
var x = Math.floor(400*Math.random());
var w = Math.floor(90*Math.random())+10;
var h = Math.floor(90*Math.random())+10;
var rect1 = document.createElementNS(svgGC.namespaceURI, 'rect');
rect1.setAttribute('x', x);
rect1.setAttribute('y', 400-h);
rect1.setAttribute('fill', 'darkblue');
rect1.setAttribute('width', w);
rect1.setAttribute('height', h);
rect1.setAttribute('opacity', 0.2);
var rect2 = document.createElementNS(svgGC.namespaceURI, 'rect');
rect2.setAttribute('x', x+(w/4));
rect2.setAttribute('y', 400-2*h);
rect2.setAttribute('fill', 'royalblue');
rect2.setAttribute('width', w/2);
rect2.setAttribute('height', h);
rect2.setAttribute('opacity', 0.4);
var rect3 = document.createElementNS(svgGC.namespaceURI, 'rect');
rect3.setAttribute('x', x+(w/4)+(w/8));
rect3.setAttribute('y', 400-3.5*h);
rect3.setAttribute('fill', 'lightblue');
rect3.setAttribute('width', w/4);
rect3.setAttribute('height', 1.5*h);
rect3.setAttribute('opacity', 0.6);
svgGC.appendChild(rect1);
svgGC.appendChild(rect2);
svgGC.appendChild(rect3);
}}
functionGC()
</script>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate