<?xml version="1.0" standalone="no"?>

<svg onload="init()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


<!--
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
-->

<style type='text/css'>
<![CDATA[
symbols {font-family:SimSun; color:blue;}
]]>
</style>

<script type='text/ecmascript'>
<![CDATA[

var i;
var symbols = [['\u8272',800],['\u6DA9',800],['\u94EF',800],['\u745F',800],['\u585E',800]];
var timeout;
var startOnLoad = true;

function init() {
	reset();
	if(startOnLoad) setTimeout('play()',200);
}
function play(){
	if(!timeout) {
		
		//update();
		timeout = setTimeout("update()",symbols[i][1]);
		
		setAttr('playGrp','pointer-events','none');
		setAttr('playIco','fill','#888');
		setAttr('pauseGrp','pointer-events','all');
		setAttr('pauseIco','fill','#000');
		setAttr('resetGrp','pointer-events','none');
		setAttr('resetIco','fill','#888');
	}
}
function update() {
	i++;
	if(i >= symbols.length) i=0;
	document.getElementById('txt').firstChild.data = symbols[i][0];
	timeout = setTimeout("update()",symbols[i][1]);
}
function pause() {
	
	timeout = clearTimeout(timeout);
	
	setAttr('playGrp','pointer-events','all');
	setAttr('playIco','fill','#000');
	setAttr('pauseGrp','pointer-events','none');
	setAttr('pauseIco','fill','#888');
	setAttr('resetGrp','pointer-events','all');
	setAttr('resetIco','fill','#000');
}
function reset() {
	i = 0;
	document.getElementById('txt').firstChild.data = symbols[i][0];
	setAttr('playGrp','pointer-events','all');
	setAttr('playIco','fill','#000');
	setAttr('resetGrp','pointer-events','none');
	setAttr('resetIco','fill','#888');
	setAttr('pauseGrp','pointer-events','none');
	setAttr('pauseIco','fill','#888');
}
function setAttr(id,attr,val) {
	document.getElementById(id).setAttributeNS(null,attr,val);
}
]]>
</script>

<title> outside rectangle </title>
	<rect x="12" y="18" rx="10" ry="10" width="540" height="344" fill="#bbb" stroke="#bbb" stroke-width="4" />
	<rect x="10" y="10" rx="10" ry="10" width="540" height="350" fill="#eee" stroke="#555" stroke-width="4" />

<title> title for left part </title>
<text x='25' y='335' font-family='Century Schoolbook' fill='navy' font-size='170%'>Ideographic Writing
</text>

<title> title for right part </title>
<text x='315' y='335' font-family='Century Schoolbook' fill='navy' font-size='170%'>Phonetic Writing
</text>

<title>Left small circle</title>
	
	<circle cx="133" cy="143" r="40" fill="#bbb" stroke="none"/>
	<circle cx="130" cy="140" r="40" fill="rgb(248,245,240)" stroke="#333" stroke-width="1.5" />

<title> ideographs </title>

	<text id="txt" x="128" y="150" fill="blue" pointer-events="none" font-family="SimSun" font-size="30" font-weight="#600" text-anchor="middle">0</text>

<title>Left large circle</title>
<circle cx="133" cy="143" r="90" fill="none" stroke="none"/>
	<circle cx="130" cy="140" r="90" fill="none" stroke="#333" stroke-width="1.5" />
	
	<g transform="translate(60,280)">
		<title> play-button </title>

		<g id="playGrp" transform="translate(0,0)" onclick="play()">
			<circle cx="2" cy="1" r="20" fill="#777"/>
			<circle cx="0" cy="0" r="20" fill="#bcc"/>
			<path id="playIco" fill="#888" pointer-events="none" d="M-5,-8 l14,8 -14,8 z"/>
		</g>
		
		<title> pause-button </title>
		<g id="pauseGrp" transform="translate(50,0)" onclick="pause()">
			<circle cx="2" cy="1" r="20" fill="#777"/>
			<circle cx="0" cy="0" r="20" fill="#bcc"/>

			<path id="pauseIco" fill="#888" pointer-events="none" d="M-8,-8 l6,0 0,16 -6,0 0,-16 m10,0 l6,0 0,16 -6,0 z" />
		</g>
		<title> reset-button </title>

		<g id="resetGrp" transform="translate(130,0)" onclick="reset()">
			<circle cx="2" cy="1" r="20" fill="#777"/>
			<circle cx="0" cy="0" r="20" fill="#bcc"/>
			<path id="resetIco" fill="#888" pointer-events="none" d="M-7,-7 l14,0 0,14 -14,0 z" />
		</g>

	</g>

<title> left se1 </title>

<text style="fill:blue" x='155px' y="98px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-6' dy='-2' style='font-size:60%;'>1</tspan>
</text>

<title> left se2 </title>

<text style="fill:blue" x='48px' y="150px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>2</tspan>
</text>

<title> left se3 </title>

<text style="fill:blue" x='150px' y="200px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>3</tspan>
</text>

<title> left se4 </title>
<!--
<text fill="black" fill-opacity="0.3" x='115px' y="170px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>4</tspan>
</text>
-->
<title> right small circle </title>

	<circle cx="403" cy="143" r="40" fill="#bbb" stroke="none" stroke-dasharray='3,5'/>
	<circle cx="400" cy="140" r="40" fill="rgb(248,245,240)" stroke="#333" stroke-width="1.5" stroke-dasharray='3,5'/>

<title> Right large circle </title>

<!--
<circle cx="403" cy="143" r="90" fill="none" stroke="none"/>
-->
	<circle cx="400" cy="140" r="90" fill="none" stroke="#333" stroke-width="1.5" />

<title> right se1 </title>

<text style="fill:blue" x='425px' y="100px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>1</tspan>
</text>

<title> right se2 </title>

<text style="fill:blue" x='318px' y="150px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>2</tspan>
</text>

<title> right se3 </title>

<text style="fill:blue" x='418px' y="200px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>3</tspan>
</text>

<title> right se4 </title>

<text fill="blue" x='385px' y="145px" font-size='145%;'>
<tspan>se</tspan> 
<tspan baseline-shift ='super' dx='-5' dy='-1' style='font-size:65%;'>4</tspan>
</text>

<title> Diagram I </title>
<text fill='teal' x='30' y='395' font-size='170%' style='font-weight:600;'>
Diagram I
</text>

</svg>