User:Itai/Graphic Timeline of Middle-earth/Dwarves

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="7145px" height="320px" xml:lang="English"> <desc>Realms of the Dwarves of Middle-earth</desc> <defs> <symbol id="arrowRight"> <desc>A right pointing arrow</desc> <line x1="0" y1="4" x2="10" y2="4" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="10" y1="4.4" x2="7" y2="1" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="10" y1="3.6" x2="7" y2="7" style="stroke:rgb(99,99,99);stroke-width:1"/> </symbol> <symbol id="arrowLeft"> <desc>A left pointing arrow</desc> <line x1="10" y1="4" x2="1" y2="4" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="1" y1="4.4" x2="4" y2="1" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="1" y1="3.6" x2="4" y2="7" style="stroke:rgb(99,99,99);stroke-width:1"/> </symbol> <symbol id="expand"> <line x1="1" y1="3" x2="11" y2="3" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="0.6" y1="3.4" x2="4" y2="0" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="0.6" y1="2.6" x2="4" y2="6" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="11.4" y1="3.4" x2="8" y2="0" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="11.4" y1="2.6" x2="8" y2="6" style="stroke:rgb(99,99,99);stroke-width:1"/> </symbol> <symbol id="shrink"> <line x1="4" y1="3" x2="8" y2="3" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="4" y1="3.4" x2="0.6" y2="0" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="4" y1="2.6" x2="0.8" y2="6" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="8" y1="3.4" x2="11.4" y2="0" style="stroke:rgb(99,99,99);stroke-width:1"/> <line x1="8" y1="2.6" x2="11.4" y2="6" style="stroke:rgb(99,99,99);stroke-width:1"/> </symbol> </defs> <g id="outerFrame">

       	<a xlink:href="http://en.wikipedia.org/wiki/Realms_of_Middle-earth">

<text x="10" y="30" font-family="Verdana" font-size="30" fill="black">

       			Kingdoms of the Dwarves of Middle-earth
       		</text>
       	</a>

<g id="ages"> <text x="0" y="100" font-family="Verdana" font-size="15" fill="black"> First Age <animate attributeName="x" attributeType="XML" xlink:href="#timeline" begin="click" to="0" dur="1s" additive="replace" fill="freeze"/> </text> <text x="0" y="120" font-family="Verdana" font-size="15" fill="black"> Second Age <animate attributeName="x" attributeType="XML" xlink:href="#timeline" begin="click" to="-583" dur="1s" additive="replace" fill="freeze"/> </text> <text x="0" y="140" font-family="Verdana" font-size="15" fill="black"> Third Age <animate attributeName="x" attributeType="XML" xlink:href="#timeline" begin="click" to="-4023" dur="1s" additive="replace" fill="freeze"/> </text> </g> <g id="buttons"> <use x="5" y="300" xlink:href="#arrowLeft"> <animate attributeName="x" attributeType="XML" xlink:href="#timeline" type="translate" begin="mousedown" end="mouseup" to="0" dur="2s" additive="replace" fill="freeze"/> </use> <use x="20" y="300" xlink:href="#arrowRight"> <animate attributeName="x" attributeType="XML" xlink:href="#timeline" type="translate" begin="mousedown" end="mouseup" to="-7045" dur="2s" additive="replace" fill="freeze"/> </use> <use x="35" y="300" xlink:href="#expand"> <animate attributeName="viewbox" attributeType="XML" xlink:href="#timeline" type="translate" begin="mousedown" end="mouseup" dur="2s" values="0 0 100 320; 0 0 7045 320" additive="replace" fill="freeze"/> </use> <use x="50" y="300" xlink:href="#shrink"> <animate attributeName="viewbox" attributeType="XML" xlink:href="#timeline" type="translate" begin="mousedown" end="mouseup" dur="2s" values="0 0 7045 320; 0 0 100 320" additive="replace" fill="freeze"/> </use> </g> </g>

       <svg x="100" y="50" width="7045px" height="320px" preserveAspectRatio="none">

<svg id="timeline" y="-40" viewbox="0 0 10 10" preserveAspectRatio="none"> <g id="ageTitles"> <a xlink:href="http://en.wikipedia.org/wiki/First_Age">

       				<text x="291.5" y="65" font-family="Verdana" font-size="15" fill="black" style="text-anchor:middle">
       					First Age

</text>

       			</a>
       			<line x1="583" y1="50" x2="583" y2="320" style="stroke:rgb(99,99,99);stroke-width:1"/>

<a xlink:href="http://en.wikipedia.org/wiki/Second_Age"> <text x="2303.5" y="65" font-family="Verdana" font-size="15" fill="black" style="text-anchor:middle">

       					Second Age

</text>

       			</a>

<line x1="4024" y1="50" x2="4024" y2="320" style="stroke:rgb(99,99,99);stroke-width:1"/> <a xlink:href="http://en.wikipedia.org/wiki/Third_Age"> <text x="5534.5" y="65" font-family="Verdana" font-size="15" fill="black" style="text-anchor:middle">

       					Third Age

</text> </a> </g> <g id="Moria"> <a xlink:href="http://en.wikipedia.org/wiki/Moria_(Middle-earth)">

       			<text x="0" y="100" font-family="Verdana" font-size="12" fill="black">
       				Moria

</text> </a>

       			<line x1="0" y1="110" x2="6005" y2="110" style="stroke:rgb(99,99,99);stroke-width:10">

<desc>1 First Age - 1981 Third Age</desc> </line> </g> <g id="Nogrod"> <a xlink:href="http://en.wikipedia.org/wiki/Nogrod">

       			<text x="0" y="150" font-family="Verdana" font-size="12" fill="black">
       				Nogrod

</text>

       			</a>
       			<line x1="0" y1="160" x2="583" y2="160" style="stroke:rgb(99,99,99);stroke-width:10">

<desc>1 - 583 First Age</desc> </line> </g> <g id="Erebor"> <a xlink:href="http://en.wikipedia.org/wiki/Erebor"> <text x="0" y="200" font-family="Verdana" font-size="12" fill="black">

       				Erebor

</text>

       			</a>

<line x1="6023" y1="210" x2="6234" y2="210" style="stroke:rgb(99,99,99);stroke-width:10"> <desc>1999 - 2210 Third Age</desc>

       			</line>
       			<line x1="6594" y1="210" x2="6794" y2="210" style="stroke:rgb(99,99,99);stroke-width:10">

<desc>2570- 2779 Third Age</desc>

       			</line>
       			<line x1="6965" y1="210" x2="7045" y2="210" style="stroke:rgb(99,99,99);stroke-width:10">

<desc>2941 Third Age - Fourth Age</desc> </line> </g> <g id="Grey Mountains"> <a xlink:href="http://en.wikipedia.org/wiki/Grey_Mountains">

       			<text x="0" y="250" font-family="Verdana" font-size="12" fill="black">
       				Grey Mountains

</text> </a>

       			<line x1="6234" y1="260" x2="6613" y2="260" style="stroke:rgb(99,99,99);stroke-width:10">

<desc>2210 - 2589 Third Age</desc>

       			</line>

</g> <g id="Iron Hills"> <a xlink:href="http://en.wikipedia.org/wiki/Iron_Hills">

       			<text x="0" y="300" font-family="Verdana" font-size="12" fill="black">
       				Iron Hills

</text>

       			</a>
       			<line x1="6613" y1="310" x2="7045" y2="310" style="stroke:rgb(99,99,99);stroke-width:10">

<desc>2589 Third Age - Fourth Age</desc> </line> </g> </svg>

       </svg>

</svg>