JavaScript. Подробное руководство, 6-е издание, стр. 354

 ">

</body>

</html>

В примере 21.3 демонстрируется создание еще одного SVG-изображения: в нем формат SVG используется для отображения аналоговых часов (рис. 21.4). Однако вместо создания дерева SVG-элементов с самого начала, в нем используется статическое SVG-изображение циферблата, встроенное в HTML-страницу. Это статическое изображение включает два SVG-элемента

<line>,

представляющих часовую и минутную стрелки. Обе линии направлены вверх, в результате чего статическое изображение часов показывает время 12:00. Чтобы превратить это изображение в действующие часы, в примере используется сценарий на языке JavaScript, устанавливающий атрибут

transform

каждого элемента

<liпе>

и поворачивающий их на углы, соответствующие текущему времени.

JavaScript. Подробное руководство, 6-е издание - i_055.jpg

Обратите внимание, что в примере 21.3 разметка SVG встроена непосредственно в файл HTML5 и в ней не используются пространства имен XML, как в XHTML-файле выше. Это означает, что данный пример будет работать только в броузерах, поддерживающих возможность непосредственного встраивания разметки SVG. Однако если преобразовать HTML-файл в XHTML, тот же самый прием будет работать и в старых броузерах с поддержкой SVG.

Пример 21.3. Отображение времени посредством манипулирования SVG-изображением

<! D0CTYPE НТМ1_>

<html>

<head>

 <title>Analog Clock</title>

 <script>

 function updateTime() { // Обновляет SVG-изображение часов

<b>                            // в соответствии с текущим временем</b>

 var now = new Date(); // Текущее время

 var min = now.getMinutes(); // Минуты

 var hour = (now.getHours() % 12) + min/60; // Часы с дробной частью

 var minangle = min*6; // 6 градусов на минуту

 var hourangle = hour*30; // 30 градусов на час

 // Получить SVG-элементы стрелок часов

 var minhand = document.getElementById("minutehand");

 var hourhand = document.getElementByldC'hourhand”);

<b>      // Установить в них SVG-атрибут для перемещения по циферблату</b>

 minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)"); 

 hourhand.setAttribute("transform", "rotate(" + hourangle + ”,50,50)");

<b>      // Обновлять показания часов 1 раз в минуту setTimeout(updateTime, 60000);</b>

 }

 </script>

 <style>

<b>    /* Все следующие CSS-стили применяются к SVG-элементам, объявленным ниже */</b>

 #clock { /* общие стили для всех элементов часов */

 stroke: black; /* черные линии */

 stroke-linecap: round; /* с закругленными концами */

 fill: #ееf; /* на светлом, голубовато-сером фоне */

 }

 #numbers { /* стиль отображения цифр на циферблате */

 font-family: sans-serif;

 font-size: 7pt;

 font-weight: bold;

 text-anchor: middle;

 stroke: none; fill: black;

 }

 </style>

</head>

<body onload="updateTime()">

 

 <svg id="clock" viewBox="0 0 100 100” width="500" height="500">

 <defs> 

<b>      &lt;filter id=&quot;shadow&quot; x=&quot;-50%&quot; y=&quot;-50%&quot; width=&quot;200%&quot; height=&quot;200%&quot;&gt;</b>

<b>        &lt;feGaussianBlur in=&quot;SourceAlpha&quot; stdDeviation=&quot;1&quot; result=&quot;blur&quot; /&gt;</b>

 <fe0ffset in="blur" dx="1" dy="1" result="shadow" />

 <feMerge>

 <feMergeNode in="SourceGraphic"/xfeMergeNode in="shadow"/>

 </feMerge>

 </filter>