<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Path Testcase</title>
    <script type="text/javascript">
    <![CDATA[

function handleKeypress(event)
{
  if (event.keyCode == 13)
    document.getElementById('path').setAttribute('d', document.getElementById('d').value);
}

// M 200,200 A90.5,90.5 0 1,1 380,200
// M 200,200 A100,100 0 1,1 400,200
// M 200,200 A110.5,110.5 0 0,1 420,200

// M 200,200 A62.5,62.5 0 1,1 300,200
// M 200,200 A162.5,162.5 0 0,1 500,200

    ]]>
    </script>
  </head>
  <body>

    <h1>Path Testcase</h1>

    <p>Change the value of the '<a href="http://www.w3.org/TR/SVG11/paths.html">path</a>' element's 'd' attibute by editing the text below and hitting Enter.</p>

    <form onsubmit="event.preventDefault()">
      <p>d="<input id="d" type="text" value="M 200,200 A10,10 0 0,0 300,300"
                   style="width:30em;" onkeypress="handleKeypress(event)" />"
      </p>
    </form>

    <p style="width: 500px; height: 500px; border: solid 2px black">
      <svg xmlns="http://www.w3.org/2000/svg" id="svgEl" width="500px" height="500px"
           viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
        <path id="path" fill="none" stroke="red"
              d="M 200,200 A10,10 0 0,0 300,300"/>
      </svg>
    </p>

  </body>
</html>
