Member Avatar for Drugsxxx

Hi

I was wondering how to do "for" loop in svg, i need it to do something like this:

500 rectangles i rows, simple black rectangels.

I did this with Canvas but i dont know how to make it with svg. Could you help me with this??

Edited by Drugsxxx
  • 4 Contributors
  • 11 Replies
  • 5K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by jaumetet

Recommended Answers

All 11 Replies

Member Avatar for pritaeas

I don't think SVG supports loops. What you can do is reuse an element, but you still need to add a tag for every one you need. Unless of course you programmatically generate your SVG.

Member Avatar for Drugsxxx

Yeah SVG dont support loops but i was thinking about using javasript with svg and then use it to do some kind of loop but dont know how. Any ideas?? I am doing SVG in html file.

Member Avatar for pritaeas

Can you show what you have?

Member Avatar for Drugsxxx

Well i have nothing i mean i know how to do rectangle in SVG but dont know how to do rest. I mean its dont have to be loop. But how to draw 100 rectangles using SVG without 100 lines of code??

Edited by Drugsxxx
Member Avatar for pritaeas

You can't.

Member Avatar for Drugsxxx

hmm i know it is posible. Will have to look more. Maybe someone else have idea??

Member Avatar for IIM

you can use a trick something like this:-

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">

    <g>
        <animateTransform attributeName="transform" type="rotate" 
           values="0 8 8; 45 8 8; 90 8 8; 135 8 8; 180 8 8; 225 8 8; 270 8 8; 315 8 8" 
           dur="8s" calcMode="discrete" repeatCount="indefinite" />

        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>


</svg>

This is for rotation,it actually is not a loop but animation effect.

For loop you have to use javascript,dynamically create svg element and then use loop on it. http://stackoverflow.com/questions/12786797/how-to-draw-rectangles-dynamically-in-svg

Member Avatar for Drugsxxx

Thx for your answer. I was looking for something like this.

But i cant get it work. Can some one tell me why this code dont works??

<html>
<head>
<script type="text/javascript">

var svgns = "http://www.w3.org/2000/svg";
function rectan()
{
for (var i = 0; i < 100; i++) {
    var x = Math.random() * 5000,
        y = Math.random() * 3000;

    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'height', '50');
    rect.setAttributeNS(null, 'width', '50');
    rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
    document.getElementById('svgOne').appendChild(rect);
}
}
</script>
</head>
<body onload="rectan"();">

<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000"> 
<rect x="50" y="50"
            width="50" height="50"
            fill="black" 
            />
</svg>
</body>
</html>

It should genereate rectranles. but all it does is one rectangle from svg section.

Member Avatar for pritaeas

Line 23 has a double quote too much.

Member Avatar for Drugsxxx

You have right. Thx for your answer. But still it dont show the random rectangles just one from svg section. What else can be wrong??

Member Avatar for jaumetet

Hello, for me it works if I put the script at the end of the body and then I call the function:

<html>
<head>

</head>
<body>

<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000"> 
<rect x="50" y="50"
            width="50" height="50"
            fill="black" 
            ></rect>
</svg>
<script type="text/javascript">

var svgns = "http://www.w3.org/2000/svg";
function rectan()
{
for (var i = 0; i < 100; i++) {
    var x = Math.random() * 5000,
        y = Math.random() * 3000;

    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'height', '50');
    rect.setAttributeNS(null, 'width', '50');
    rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
    document.getElementById('svgOne').appendChild(rect);
}

}
rectan();
</script>
</body>
</html>
Edited by jaumetet
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.