SVG-часы с JavaScript анимацией

Здесь вы можете посмотреть демо-версию часов для сайта, выполненных с использованием svg-графики и аниминированных с помощью javascript. Код скрипта очень простой. Кроме того, здесь применено обтекание изображения по его форме - окружности. Подробнее о том, как сделать такое обтекание мы писали ранее. Теперь подробнее. Для того, чтобы нарисовать круг в SVG необходимо написать тег circle и указать координаты где его рисовать. Также нужно задать величину круга (радиус). Кроме того, необходимо нарисовать стрелки. Для этого используется тег rect с помощью которого отрисовываются стрелки для часов и минут. Секундная стрелка изображается тонкой линией. Для того, чтобы создать эффект перемещающихся стрелок пишем скрипт, а точнее функцию с двумя аргументами - первый указывает элемент, а второй угол поворота этого элемента в зависимости от текущего времени. А теперь приведем, стили, код svg и код скрипта для реализации анимации. Итак, подключаем стили:

#face { stroke-width: 2px; stroke: #fff;}
#hour, #min, #sec { stroke-width: 1px; fill: #333; stroke: #555; }
#sec { stroke: #f55; }
.element { 
 float: left;
 shape-outside: circle(50%);
}

Затем размещаем контейнер с svg-картинкой:

< div class="element" style="width:25%;margin-right:10px;margin-bottom:10px;" >
< svg id="clock" viewBox="0 0 100 100" >
< circle id="face" cx="50" cy="50" r="45" />
< g id="hands" >
< rect id="hour" x="48.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
< rect id="min" x="48" y="12.5" width="3" height="40" rx="2" ry="2"/>
< line id="sec" x1="50" y1="50" x2="50" y2="16" />
< /g>
< /svg>
<⁄div>

И в завершение код скрипта:

setInterval(function() {
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
}
var d = new Date()
r(sec, 6*d.getSeconds())
r(min, 6*d.getMinutes())
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)