|
<?xml
version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Ein Beispiel fuer Bezierkurven</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+"_line1").setAttribute("x2",evt.getClientX());
document.getElementById(pressed+"_line1").setAttribute("y2",evt.getClientY());
document.getElementById(pressed+"_line2").setAttribute("x2",evt.getClientX());
document.getElementById(pressed+"_line2").setAttribute("y2",evt.getClientY());
document.getElementById("kurve").setAttribute("d","M
10 100 Q "
+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"
id="kurve"
d="M 10 100 Q 100 5 200 100"/>
<g>
<circle cx="100" cy="5" r="3" fill="black"
id="CP" onmousedown="initCPPressed(evt)" onmouseup="uninitCPPressed(evt)"
onmousemove="moveCP(evt)"/>
<line x1="10" y1="100" x2="100" y2="5"
stroke-width="1" stroke="black" id="CP_line1"/>
<line x1="200" y1="100" x2="100"
y2="5" stroke-width="1" stroke="black"
id="CP_line2"/>
</g>
</svg>
|
|
