<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  >
  <head>
	
	<script language="javascript">
	  <![CDATA[<!--
	  var dx,dy;
	  var logo;

	  function init()
	  {
	    logo = document.getElementById('logo');
	    logo.addEventListener("mousedown", mousedown_listener, false);
	  }	    

	  function mousedown_listener(evt)
	  {
            var transform_list = logo.transform.baseVal;
            var xform = transform_list.getItem(transform_list.numberOfItems -1);
            var curx = xform.matrix.e;
            var cury = xform.matrix.f;
            //document.write("x0:" + curx + " y0:" + cury);
	    dx = evt.clientX - curx;
	    dy = evt.clientY - cury;
            //document.write("cx:" + evt.clientX + " cy:" + evt.clientY + " dx:" + dx + " dy:" + dy);
	    document.addEventListener("mousemove", mousemove_listener, true);
	    document.addEventListener("mouseup", mouseup_listener, true);
	  }

	  function mouseup_listener(evt)
	  {
	    document.removeEventListener("mousemove", mousemove_listener, true);
	    document.removeEventListener("mouseup", mouseup_listener, true);
	  }

	  function mousemove_listener(evt)
	  {
	    var id = logo.ownerSVGElement.suspendRedraw(1000);
            var x = evt.clientX - dx;
            var y = evt.clientY - dy;
            //console.write("x:" + x + " y:" + y);
            logo.setAttribute("transform", "translate(" + x + "," + y + ")");
	    logo.ownerSVGElement.unsuspendRedraw(id);
	  }

	  -->]]>
	</script>
  </head>
  <body onload="init();">
    <h3>SVG + event handler demo</h3>
    <h4><i>modified for Inkscape and translations</i></h4>

    <p>Drag the logo with the mouse!</p>
	<svg:svg width="600px" height="400px">
	  <svg:polyline points="0,0 600,0 600,400 0,400 0,0" style="stroke:black; fill:none;"/>
          <svg:g id="logo" transform="translate(100,100)">
             <svg:g
               transform="matrix(0.2,0,0,0.2,-15.95526,-1.769472)"
               id="g839">
             <svg:path
               d="M 397.64309,320.25301 L 280.39197,282.517 L 250.74227,124.83447 L 345.08225,29.146783 L 393.59996,46.667064 L 483.89679,135.61619 L 397.64309,320.25301 z "
               style="font-size:12px;fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:0.93619299pt"
               id="whiteSpace" />
             <svg:path
               d="M 476.95792,339.17168 C 495.78197,342.93607 499.54842,356.11361 495.78197,359.87802 C 492.01856,363.6434 482.6065,367.40781 475.07663,361.76014 C 467.54478,356.11361 467.54478,342.93607 476.95792,339.17168 z "
               style="font-size:12px;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:1pt"
               id="droplet01" />
             <svg:path
               d="M 286.46194,340.42914 C 284.6277,340.91835 269.30405,327.71337 257.16909,333.8338 C 245.03722,339.95336 236.89276,353.65666 248.22676,359.27982 C 259.56184,364.90298 267.66433,358.41867 277.60113,351.44119 C 287.53903,344.46477 287.18046,343.1206 286.46194,340.42914 z "
               style="font-size:12px;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:1pt"
               id="droplet02" />
             <svg:path
               d="M 510.35756,306.92856 C 520.59494,304.36879 544.24333,306.92856 540.47688,321.98634 C 536.71354,337.04806 504.71297,331.39827 484.00371,323.87156 C 482.12141,308.81083 505.53237,308.13423 510.35756,306.92856 z "
               style="font-size:12px;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:1pt"
               id="droplet03" />
             <svg:path
               d="M 359.2403,21.362537 C 347.92693,21.362537 336.6347,25.683095 327.96556,34.35223 L 173.87387,188.41466 C 165.37697,196.9114 161.1116,207.95813 160.94269,219.04577 L 160.88418,219.04577 C 160.88418,219.08524 160.94076,219.12322 160.94269,219.16279 C 160.94033,219.34888 160.88418,219.53256 160.88418,219.71865 L 161.14748,219.71865 C 164.0966,230.93917 240.29699,245.24198 248.79866,253.74346 C 261.63771,266.58263 199.5652,276.01151 212.4041,288.85074 C 225.24316,301.68979 289.99433,313.6933 302.8346,326.53254 C 315.67368,339.37161 276.5961,353.04289 289.43532,365.88196 C 302.27439,378.72118 345.40201,362.67257 337.5908,396.16198 C 354.92909,413.50026 391.10302,405.2208 415.32417,387.88252 C 428.16323,375.04345 390.6948,376.17577 403.53397,363.33668 C 416.37304,350.49745 448.78128,350.4282 476.08902,319.71589 C 465.09739,302.62116 429.10801,295.34136 441.94719,282.50217 C 454.78625,269.66311 479.74708,276.18423 533.60644,251.72479 C 559.89837,239.78398 557.72636,230.71459 557.62567,219.71865 C 557.62356,219.48727 557.62567,219.27892 557.62567,219.04577 L 557.56716,219.04577 C 557.3983,207.95812 553.10345,196.9114 544.60673,188.41466 L 390.54428,34.35223 C 381.87515,25.683095 370.55366,21.362537 359.2403,21.362537 z M 357.92378,41.402939 C 362.95327,41.533963 367.01541,45.368018 374.98006,50.530832 L 447.76915,104.50827 C 448.56596,105.02498 449.32484,105.564 450.02187,106.11735 C 450.7189,106.67062 451.3556,107.25745 451.95277,107.84347 C 452.54997,108.42842 453.09281,109.01553 453.59111,109.62808 C 454.08837,110.24052 454.53956,110.86661 454.93688,111.50048 C 455.33532,112.13538 455.69164,112.78029 455.9901,113.43137 C 456.28877,114.08363 456.52291,114.75639 456.7215,115.42078 C 456.92126,116.08419 457.08982,116.73973 457.18961,117.41019 C 457.28949,118.08184 457.33588,118.75535 457.33588,119.42886 L 414.21245,98.598549 L 409.9118,131.16055 L 386.18512,120.04324 L 349.55654,144.50131 L 335.54288,96.1703 L 317.4919,138.4453 L 267.08369,143.47735 L 267.63956,121.03795 C 267.63956,115.64823 296.69685,77.915899 314.39075,68.932902 L 346.77721,45.674327 C 351.55594,42.576634 354.90608,41.324327 357.92378,41.402939 z M 290.92738,261.61333 C 313.87149,267.56365 339.40299,275.37038 359.88393,275.50997 L 360.76161,284.72563 C 343.2235,282.91785 306.11346,274.45012 297.36372,269.98057 L 290.92738,261.61333 z "
               style="font-size:12px;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:1pt"
               id="mountainDroplet" />
             </svg:g>
        </svg:g>
	</svg:svg>
  </body>
</html>

