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

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  Realms of the Dwarves of Middle-earth  A right pointing arrow     A left pointing arrow          <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"/> <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 </a> <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 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 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"/> </g> <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 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 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 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"/> </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 </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 </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 </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 </a> <line x1="0" y1="110" x2="6005" y2="110" style="stroke:rgb(99,99,99);stroke-width:10"> 1 First Age - 1981 Third Age </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 </a> <line x1="0" y1="160" x2="583" y2="160" style="stroke:rgb(99,99,99);stroke-width:10"> 1 - 583 First Age </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 </a> <line x1="6023" y1="210" x2="6234" y2="210" style="stroke:rgb(99,99,99);stroke-width:10"> 1999 - 2210 Third Age <line x1="6594" y1="210" x2="6794" y2="210" style="stroke:rgb(99,99,99);stroke-width:10"> 2570- 2779 Third Age <line x1="6965" y1="210" x2="7045" y2="210" style="stroke:rgb(99,99,99);stroke-width:10"> 2941 Third Age - Fourth Age </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 </a> <line x1="6234" y1="260" x2="6613" y2="260" style="stroke:rgb(99,99,99);stroke-width:10"> 2210 - 2589 Third Age </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 </a> <line x1="6613" y1="310" x2="7045" y2="310" style="stroke:rgb(99,99,99);stroke-width:10"> 2589 Third Age - Fourth Age </g>