本文介绍了利用SVG代码创建动态数字时钟的方法，并在文章中将能看到数字时钟的SVG演示。本案例中涉及到中文字体,在SVG中对字体的描述必须规范,否则会出现乱码问题。
演示：
代码：
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
onload="yy_datetime()">
<title>SVG - Learning By Coding</title>
<desc>SVG-Spezifikation in Beispielen</desc>
<defs>
<style type="text/css">
<![CDATA[
text
{
font-family: SimSun;
font-weight: bold;
}
text.t1
{
fill: #F00;
font-size: 24px;
}
text.t2
{
fill: #090;
font-size: 36px;
}
text.headline
{
font-family: sans-serif;
font-size: 24px;
font-weight: normal;
fill: #000;
}
]]>
</style>
<script type="text/javascript">
<![CDATA[
var svgroot,text1,text2;
svgroot=document.documentElement;
text1=svgroot.getElementById("date");
text2=svgroot.getElementById("time");
function yy_datetime()
{
var datetime,temp,date,time;
datetime=new Date().toLocaleString();
temp=datetime.lastIndexOf(" ");
date=datetime.substring(0,temp);
time=datetime.substring(temp+1,datetime.length);
text1.firstChild.data=date;
text2.firstChild.data=time;
setTimeout("yy_datetime()",1000);
}
]]>
</script>
</defs>
<text class="headline" x="20" y="30">SVG Digital Clock</text>
<text id="date" class="t1" x="20" y="80"> </text>
<text id="time" class="t2" x="20" y="120"> </text>
</svg>
(THE END)
