<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title> Beispiel 8 </title>
			<meta name="author" content="Administrator"/>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<link rel="stylesheet" type="text/css"
				href="html5_svg10.css" title="style1"/>
	</head>

<body>
	<h1>8. SVG-Beispiel</h1>

<svg width="220" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Interaktive Berzierkurven</title>
  <defs>
    <script type="text/ecmascript">
        <![CDATA[
     var pressed="";
     function initCPPressed(evt) {
       pressed= evt.getTarget().getAttribute("id");
     }
     function uninitCPPressed(evt) {
       pressed= "";
     }
     function moveCP(evt) {
       if (pressed!="") {
         document.getElementById(pressed).setAttribute("cx",evt.getClientX());
         document.getElementById(pressed).setAttribute("cy",evt.getClientY());
         document.getElementById(pressed+"_line").setAttribute("x2",evt.getClientX());
         document.getElementById(pressed+"_line").setAttribute("y2",evt.getClientY());
         if (pressed=="CP1") {
           document.getElementById("kurve").setAttribute("d","M 10 100 C "
                                                         +evt.getClientX()+" "
                                                         +evt.getClientY()+" "
                                                         +document.getElementById("CP2").getAttribute("cx")+" " 
                                                         +document.getElementById("CP2").getAttribute("cy")
                                                         +" 200 100");
         } else {
           document.getElementById("kurve").setAttribute("d","M 10 100 C "
                                                         +document.getElementById("CP1").getAttribute("cx")+" "
                                                         +document.getElementById("CP1").getAttribute("cy")+" "
                                                         +evt.getClientX()+" "
                                                         +evt.getClientY()+" 200 100");
         }
        }
      }
    ]]></script>

  </defs>
  <rect width="100%" height="100%" fill="white" onmouseup="uninitCPPressed(evt)" onmousemove="moveCP(evt)"/>
  <path stroke="#FFBB00" stroke-width="3" fill="none"
d="M 10 100 C 10 50 200 50 200 100" id="kurve"/>
  <g>
    <circle cx="10" cy="50" r="4" fill="black" id="CP1" onmousedown="initCPPressed(evt)" onmouseup="uninitCPPressed(evt)" onmousemove="moveCP(evt)"/>
    <line x1="10" y1="100" x2="10" y2="50" stroke-width="1" stroke="black" id="CP1_line"/> 
    <circle cx="200" cy="50" r="4" fill="black" id="CP2" onmousedown="initCPPressed(evt)" onmouseup="uninitCPPressed(evt)"/>
    <line x1="200" y1="100" x2="200" y2="50" stroke-width="1" stroke="black" id="CP2_line"/> 
  </g>
</svg>

<br />

</body>
</html>




