★ Рубрика: Кодинг

SVG-часы для сайта

Использование JavaScript в сочетании с векторной графикой позволяет получать очень интересные решения. Здесь приведен пример SVG-анимации в виде аналоговых часов. Преимущество векторной графики над растровой в ее масштабируемости.

При увеличении изображения его качестве не меняется. Это очень удобно, если шаблон вашего сайта адаптируемый. Посмотрите пример слева. Эти часы реализованы на основе svg-графики. Скрипт используется для вычисления величин углов, на которые надо поворачивать стрелки на основе системного времени. А для отрисовки часов уже используются возможности svg-графики. Так как все изображение это обычный текст, то его легко настроить. Это можно делать даже динамически, используя те же скрипты. Возможности такой графики ограничены только вашей фантазией и навыками программирования. Она не подходит только для создания очень детализованных изображений. Для тех, кто не знает что такое svg-графика, приведем цитату из Википедии.

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 - версия 1.1, которая остается актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.

Дальше приведем код этих часов:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="270px" height="270px" viewBox="0 0 270 270" 
onload="setClock()">
<script>
<![CDATA[
var xmlns="http://www.w3.org/2000/svg"
function setClock()
{
 var date = new Date()
 var h = parseInt(date.getHours())
 h = h > 12 ? h-12: h
 var m = parseInt(date.getMinutes())
 var s = parseInt(date.getSeconds())
 var second = 6*s
 var minute =(m+s/60)*6
 var hour = (h+m/60+s/3600)*30
 var hourHand = document.getElementById("hour")
 var minuteHand = document.getElementById("minute")
 var secondHand = document.getElementById("second")
 hourHand.setAttribute("transform","rotate("+ hour.toString() +")")
 minuteHand.setAttribute("transform","rotate("+ minute.toString() +")")
 secondHand.setAttribute("transform","rotate("+ second.toString() +")") 
}
]]>
</script>
<g transform="translate(150,150)">
 <!-- tick -->
 <g>
 <circle r="108" fill="none" stroke-width="4" stroke="gray" />
 <circle r="97" fill="none" stroke-width="11" stroke="black" 
 stroke-dasharray="4,46.789082" transform="rotate(-1.5)" />
 <circle r="100" fill="none" stroke-width="5" stroke="black"
 stroke-dasharray="2,8.471976" transform="rotate(-.873)" />
 </g>
 <!-- hands -->
 <g id="hands" transform="rotate(180)">
 <g id="hour">
 <line stroke-width="5" y2="75" stroke-linecap="round" stroke="blue" opacity=".5" />
 <animateTransform attributeName="transform" type="rotate"
 repeatCount="indefinite" dur="12h" by="360" />
 <circle r="7" />
 </g>
 <g id="minute">
 <line stroke-width="4" y2="93" stroke-linecap="round" stroke="green" opacity=".9" />
 <animateTransform attributeName="transform" type="rotate"
 repeatCount="indefinite" dur="60min" by="360" />
 <circle r="6" fill="red"/>
 </g>
 <g id="second">
 <line stroke-width="2" y1="-20" y2="102" stroke-linecap="round" stroke="red" />
 <animateTransform attributeName="transform" type="rotate"
 repeatCount="indefinite" dur="60s" by="360" />
 <circle r="4" fill="blue"/>
 </g>
 </g>
</g>
</svg>

Похожие публикации: JavaScript, SVG

Войти и комментировать [ Вход | Регистрация ]