Записи

<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>