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

Флэнаган Дэвид
Шрифт:

</html>

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

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

Обратите внимание, что в примере 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-изображение часов

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

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”);

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

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

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

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

}

</script>

<style>

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

#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">

<!-- viewBox - система координат, width и height - экранные размеры -->