<table width="500" height="240" align="center" class="colorborder"><tr><td> <svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="500" height="240" onload="ver5init(evt)" onmousemove="ver5drag(evt)" onmouseup="ver5deselect()"> <style> .variable{ font-weight: bold; } .background{ fill: none; stroke: #444; stroke-width: 1; stroke-dasharray: 5, 5; } .control_line{ stroke: #28f; stroke-width: 0.5; } .point1{ fill: #28A86B; } .point2{ fill: #6495ED; } .point3{ fill: #FF7878; } .point4{ fill: #8D5FD3; } .point5{ fill: #0000FF; } #ver5example_shape{ fill: none; stroke: #111; stroke-width: 0.8; } .control_point{ fill: #FFF; opacity: 0; stroke: #888; stroke-width: 2; cursor: pointer; } .control_point:hover{ opacity: 0.5; } .invisible{ pointer-events: none; } </style> <script type="text/ecmascript"><![CDATA[ var ver5svgDoc; var ver5selectedPoint = 0; var ver5dx = 0; var ver5dy = 0; var ver5example_shape; var ver5text_variables; var ver5controls_lines; var ver5coords = [0, 0, 300, 50, 160, 20, 240, 100, 320, 100, 300, 50]; function ver5init(evt) { if ( window.ver5svgDocument == null ) { ver5svgDoc = evt.target.ownerDocument; } ver5example_shape = ver5svgDoc.getElementById('ver5example_shape'); ver5controls_lines = [ver5svgDoc.getElementById('ver5control_line1'), ver5svgDoc.getElementById('ver5control_line2'), ver5svgDoc.getElementById('ver5control_line3'), ver5svgDoc.getElementById('ver5control_line4')] ; ver5text_variables = []; for (var i=1; i<=5; i++){ ver5text_variables.push(ver5svgDoc.getElementById('ver5variable'+i)); } }; function ver5selectElement(evt, point){ ver5selectedPoint = point; control_point = evt.target.parentNode; ver5dx = ver5coords[ver5selectedPoint*2] - evt.clientX; ver5dy = ver5coords[ver5selectedPoint*2 + 1] - evt.clientY; }; function ver5drag(evt){ if (ver5selectedPoint === 0) { return; } var x = evt.clientX + ver5dx; var y = evt.clientY + ver5dy; if (ver5selectedPoint === 1) { ver5coords[ver5selectedPoint*2] = x; ver5coords[ver5selectedPoint*2 + 1] = y; ver5coords[5*2] = x; ver5coords[5*2 + 1] = y; } if ((ver5selectedPoint === 2)||(ver5selectedPoint === 3)||(ver5selectedPoint === 4)) { ver5coords[ver5selectedPoint*2] = x; ver5coords[ver5selectedPoint*2 + 1] = y; } if (ver5selectedPoint === 5) { ver5coords[ver5selectedPoint*2] = x; ver5coords[ver5selectedPoint*2 + 1] = y; ver5coords[1*2] = x; ver5coords[1*2 + 1] = y; } var d = "M"; for (var i=2; i<ver5coords.length; i+=2){ if (i === 4) { d += "Q"; } else if (i === 8 ) { d += "T"; } d += " " + ver5coords[i] + " " + ver5coords[i+1]; } ver5example_shape.setAttributeNS(null, "d", d); control_point.setAttributeNS(null, "transform", "translate(" + x + "," + y + ")"); if (ver5selectedPoint === 1) { ver5text_variables[ver5selectedPoint-1].firstChild.data = x + "," + y; ver5text_variables[ver5selectedPoint+3].firstChild.data = x + "," + y; } if ((ver5selectedPoint === 2)||(ver5selectedPoint === 3)||(ver5selectedPoint === 4)) { ver5text_variables[ver5selectedPoint-1].firstChild.data = x + "," + y; } if (ver5selectedPoint === 5) { ver5text_variables[ver5selectedPoint-1].firstChild.data = x + "," + y; ver5text_variables[ver5selectedPoint-5].firstChild.data = x + "," + y; } var sym_x = 2 * ver5coords[6] - ver5coords[4]; var sym_y = 2 * ver5coords[7] - ver5coords[5]; var sym_x2 = 2 * ver5coords[8] - sym_x; var sym_y2 = 2 * ver5coords[9] - sym_y; var sym_x3 = ver5coords[4]; var sym_y3 = ver5coords[5]; switch (ver5selectedPoint){ case 1: ver5controls_lines[2].setAttributeNS(null, "x2", sym_x2); ver5controls_lines[2].setAttributeNS(null, "y2", sym_y2); ver5controls_lines[2].setAttributeNS(null, "x1", sym_x); ver5controls_lines[2].setAttributeNS(null, "y1", sym_y); ver5controls_lines[3].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[3].setAttributeNS(null, "y1", sym_y2); ver5controls_lines[3].setAttributeNS(null, "x2", x); ver5controls_lines[3].setAttributeNS(null, "y2", y); ver5controls_lines[0].setAttributeNS(null, "x1", x); ver5controls_lines[0].setAttributeNS(null, "y1", y); break; case 2: ver5controls_lines[0].setAttributeNS(null, "x2", x); ver5controls_lines[0].setAttributeNS(null, "y2", y); ver5controls_lines[1].setAttributeNS(null, "x2", x); ver5controls_lines[1].setAttributeNS(null, "y2", y); ver5controls_lines[1].setAttributeNS(null, "x1", sym_x); ver5controls_lines[1].setAttributeNS(null, "y1", sym_y); ver5controls_lines[2].setAttributeNS(null, "x2", sym_x); ver5controls_lines[2].setAttributeNS(null, "y2", sym_y); ver5controls_lines[2].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[2].setAttributeNS(null, "y1", sym_y2); ver5controls_lines[3].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[3].setAttributeNS(null, "y1", sym_y2); break; case 3: ver5controls_lines[1].setAttributeNS(null, "x2", sym_x3); ver5controls_lines[1].setAttributeNS(null, "y2", sym_y3); ver5controls_lines[1].setAttributeNS(null, "x1", sym_x); ver5controls_lines[1].setAttributeNS(null, "y1", sym_y); ver5controls_lines[2].setAttributeNS(null, "x2", sym_x); ver5controls_lines[2].setAttributeNS(null, "y2", sym_y); ver5controls_lines[2].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[2].setAttributeNS(null, "y1", sym_y2); ver5controls_lines[3].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[3].setAttributeNS(null, "y1", sym_y2); break; case 4: ver5controls_lines[2].setAttributeNS(null, "x2", sym_x2); ver5controls_lines[2].setAttributeNS(null, "y2", sym_y2); ver5controls_lines[2].setAttributeNS(null, "x1", sym_x); ver5controls_lines[2].setAttributeNS(null, "y1", sym_y); ver5controls_lines[3].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[3].setAttributeNS(null, "y1", sym_y2); break; case 5: ver5controls_lines[2].setAttributeNS(null, "x2", sym_x2); ver5controls_lines[2].setAttributeNS(null, "y2", sym_y2); ver5controls_lines[2].setAttributeNS(null, "x1", sym_x); ver5controls_lines[2].setAttributeNS(null, "y1", sym_y); ver5controls_lines[3].setAttributeNS(null, "x1", sym_x2); ver5controls_lines[3].setAttributeNS(null, "y1", sym_y2); ver5controls_lines[3].setAttributeNS(null, "x2", x); ver5controls_lines[3].setAttributeNS(null, "y2", y); ver5controls_lines[0].setAttributeNS(null, "x1", x); ver5controls_lines[0].setAttributeNS(null, "y1", y); } }; function ver5deselect(){ ver5selectedPoint = 0; } ]]> </script> <g class="invisible"> <rect class="background" x="0.5" y="0.5" width="499" height="239" /> <path id="ver5example_shape" d="M300 50 Q160 20 240 100 T320 100 300 50" /> <line class="control_line" id="ver5control_line1" x1="300" y1="50" x2="160" y2="20" /> <line class="control_line" id="ver5control_line2" x1="160" y1="20" x2="320" y2="180" /> <line class="control_line" id="ver5control_line3" x1="320" y1="180" x2="320" y2="20" /> <line class="control_line" id="ver5control_line4" x1="320" y1="20" x2="300" y2="50" /> </g> <g transform="translate(-100,-100)"> <circle class="control_point" cx="0" cy="0" r="10" onmousedown="ver5selectElement(evt, 1)" /> <circle class="point1 invisible" cx="0" cy="0" r="3" /> </g> <g transform="translate(160,20)" > <circle class="control_point" cx="0" cy="0" r="10" onmousedown="ver5selectElement(evt, 2)" /> <circle class="point2 invisible" cx="0" cy="0" r="3" /> </g> <g transform="translate(240,100)" > <circle class="control_point" cx="0" cy="0" r="10" onmousedown="ver5selectElement(evt, 3)" /> <circle class="point3 invisible" cx="0" cy="0" r="3" /> </g> <g transform="translate(320,100)" > <circle class="control_point" cx="0" cy="0" r="10" onmousedown="ver5selectElement(evt, 4)" /> <circle class="point4 invisible" cx="0" cy="0" r="3" /> </g> <g transform="translate(300,50)" > <circle class="control_point" cx="0" cy="0" r="10" onmousedown="ver5selectElement(evt, 5)" /> <circle class="point5 invisible" cx="0" cy="0" r="3" /> </g> <text x="40" y="230"> <tspan><path</tspan> <tspan>d="</tspan><tspan class="point1 variable">M<tspan id="ver5variable1">300,50</tspan></tspan> Q<tspan class="point2 variable" id="ver5variable2">160,20</tspan> <tspan class="point3 variable" id="ver5variable3">240,100</tspan> <tspan class="point4 variable">T<tspan id="ver5variable4">320,100</tspan></tspan> <tspan class="point5 variable" id="ver5variable5">300,50</tspan> <tspan>" /></tspan> </text> </svg> </td></tr> </table>
