How to iterate in SVG? - svg

Question

I would like to render a watch in SVG. I have the circles and now I would like to render the index for the hours and minutes.
svg {
width: 100vmin;
height: 100vmin;
overflow: hidden;
}
line, circle {
stroke: black;
stroke-width: 0.3px;
}
circle {
fill: none;
}
circle.filled {
stroke: none;
fill: black;
}
<svg viewBox="0 0 100 100">
<!-- center dot -->
<circle cx="50" cy="50" r="1" class="filled" />
<!-- hour circle -->
<circle cx="50" cy="50" r="35" />
<line x1="50" y1="17" x2="50" y2="15" />
<!-- minute circle -->
<circle cx="50" cy="50" r="40" />
<line x1="50" y1="10" x2="50" y2="8" />
</svg>
I know that I can use the transform attribute to rotate the lines around the center. But how to express the loop in SVG to do it 59 times for the minutes and 11 times for the hours? Do I have to use JavaScript for this, or is it possible to draw the lines directly in SVG without writing 72 line elements? Something less verbose than this:
<line x1='50' y1='17' x2='50' y2='15' id='h0' />
<use href='#h0' transform='rotate ( 30, 50, 50)' />
<use href='#h0' transform='rotate ( 60, 50, 50)' />
<use href='#h0' transform='rotate ( 90, 50, 50)' />
<use href='#h0' transform='rotate (120, 50, 50)' />
<use href='#h0' transform='rotate (150, 50, 50)' />
<use href='#h0' transform='rotate (180, 50, 50)' />
<use href='#h0' transform='rotate (210, 50, 50)' />
<use href='#h0' transform='rotate (240, 50, 50)' />
<use href='#h0' transform='rotate (270, 50, 50)' />
<use href='#h0' transform='rotate (300, 50, 50)' />
<use href='#h0' transform='rotate (330, 50, 50)' />
and this
<line x1='50' y1='10' x2='50' y2='8' id='m0' />
<use href='#h0' transform='rotate ( 30, 50, 50)' />
<use href='#m0' transform='rotate ( 6, 50, 50)' />
<use href='#m0' transform='rotate ( 12, 50, 50)' />
<use href='#m0' transform='rotate ( 18, 50, 50)' />
<use href='#m0' transform='rotate ( 24, 50, 50)' />
<use href='#m0' transform='rotate ( 30, 50, 50)' />
<use href='#m0' transform='rotate ( 36, 50, 50)' />
<use href='#m0' transform='rotate ( 42, 50, 50)' />
<use href='#m0' transform='rotate ( 48, 50, 50)' />
<use href='#m0' transform='rotate ( 54, 50, 50)' />
<use href='#m0' transform='rotate ( 60, 50, 50)' />
<use href='#m0' transform='rotate ( 66, 50, 50)' />
<use href='#m0' transform='rotate ( 72, 50, 50)' />
<use href='#m0' transform='rotate ( 78, 50, 50)' />
<use href='#m0' transform='rotate ( 84, 50, 50)' />
<use href='#m0' transform='rotate ( 90, 50, 50)' />
<use href='#m0' transform='rotate ( 96, 50, 50)' />
<use href='#m0' transform='rotate (102, 50, 50)' />
<use href='#m0' transform='rotate (108, 50, 50)' />
<use href='#m0' transform='rotate (114, 50, 50)' />
<use href='#m0' transform='rotate (120, 50, 50)' />
<use href='#m0' transform='rotate (126, 50, 50)' />
<use href='#m0' transform='rotate (132, 50, 50)' />
<use href='#m0' transform='rotate (138, 50, 50)' />
<use href='#m0' transform='rotate (144, 50, 50)' />
<use href='#m0' transform='rotate (150, 50, 50)' />
<use href='#m0' transform='rotate (156, 50, 50)' />
<use href='#m0' transform='rotate (162, 50, 50)' />
<use href='#m0' transform='rotate (168, 50, 50)' />
<use href='#m0' transform='rotate (174, 50, 50)' />
<use href='#m0' transform='rotate (180, 50, 50)' />
<use href='#m0' transform='rotate (186, 50, 50)' />
<use href='#m0' transform='rotate (192, 50, 50)' />
<use href='#m0' transform='rotate (198, 50, 50)' />
<use href='#m0' transform='rotate (204, 50, 50)' />
<use href='#m0' transform='rotate (210, 50, 50)' />
<use href='#m0' transform='rotate (216, 50, 50)' />
<use href='#m0' transform='rotate (222, 50, 50)' />
<use href='#m0' transform='rotate (228, 50, 50)' />
<use href='#m0' transform='rotate (234, 50, 50)' />
<use href='#m0' transform='rotate (240, 50, 50)' />
<use href='#m0' transform='rotate (246, 50, 50)' />
<use href='#m0' transform='rotate (252, 50, 50)' />
<use href='#m0' transform='rotate (258, 50, 50)' />
<use href='#m0' transform='rotate (264, 50, 50)' />
<use href='#m0' transform='rotate (270, 50, 50)' />
<use href='#m0' transform='rotate (276, 50, 50)' />
<use href='#m0' transform='rotate (282, 50, 50)' />
<use href='#m0' transform='rotate (288, 50, 50)' />
<use href='#m0' transform='rotate (294, 50, 50)' />
<use href='#m0' transform='rotate (300, 50, 50)' />
<use href='#m0' transform='rotate (306, 50, 50)' />
<use href='#m0' transform='rotate (312, 50, 50)' />
<use href='#m0' transform='rotate (318, 50, 50)' />
<use href='#m0' transform='rotate (324, 50, 50)' />
<use href='#m0' transform='rotate (330, 50, 50)' />
<use href='#m0' transform='rotate (336, 50, 50)' />
<use href='#m0' transform='rotate (342, 50, 50)' />
<use href='#m0' transform='rotate (348, 50, 50)' />
<use href='#m0' transform='rotate (354, 50, 50)' />

Answer 1

You can nest use blocks, which might save you some lines, e.g.
circle {
fill: none;
stroke: black;
}
line {
stroke: black;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- center dot -->
<circle cx="50" cy="50" r="1" class="filled" />
<!-- hour circle -->
<circle cx="50" cy="50" r="35" />
<!-- minute circle -->
<circle cx="50" cy="50" r="40" />
<g id='five-block'>
<line x1="50" y1="17" x2="50" y2="15" />
<line id="minute" x1="50" y1="10" x2="50" y2="8" />
<use href='#minute' transform='rotate (6, 50, 50)' />
<use href='#minute' transform='rotate (12, 50, 50)' />
<use href='#minute' transform='rotate (18, 50, 50)' />
<use href='#minute' transform='rotate (24, 50, 50)' />
</g>
<g id="quarter-block">
<use href='#five-block' transform='rotate (30, 50, 50)' />
<use href='#five-block' transform='rotate (60, 50, 50)' />
<use href='#five-block' transform='rotate (90, 50, 50)' />
</g>
<use href='#quarter-block' transform='rotate (90, 50, 50)' />
<use href='#quarter-block' transform='rotate (180, 50, 50)' />
<use href='#quarter-block' transform='rotate (270, 50, 50)' />
</svg>
You could nest the use blocks even more if you wanted to make it slightly less verbose.
Or you could use Javascript to create the elements.

Answer 2

Since the javascript option hasn't been written out, here is an implementation:
var svg = document.querySelector("svg");
var xmlns = "http://www.w3.org/2000/svg";
var scales = [{ref: 'h0', ticks: 12}, {ref: 'm0', ticks: 60}];
scales.forEach(function(scale){
var ticks = scale.ticks;
var degrees = 360/ticks;
while (ticks) {
var use = document.createElementNS(xmlns, "use");
use.setAttribute("href", "#" + scale.ref);
use.setAttribute("transform", "rotate(" + degrees*ticks + ", 50, 50)")
svg.appendChild(use);
ticks--;
}
});
You can see it in action here: https://jsfiddle.net/dhd8g3tg/