Source of triangle-click.svg:Hide line numbers
01: <svg version="1.1" baseProfile="full"
02: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
03: width="502px" height="435px" viewBox="0 0 502 435"
04: stroke="black" stroke-width="0.5px">
05:
06: <script>
07: //<![CDATA[
08:
09: var svgNS = "http://www.w3.org/2000/svg";
10: var xlinkNS = "http://www.w3.org/1999/xlink";
11:
12: function divide(evt){
13: // Get the triangle that was clicked.
14: var triangle = evt.currentTarget;
15:
16: // Get the point that was clicked:
17: var position = document.rootElement.createSVGPoint();
18: position.x = evt.clientX;
19: position.y = evt.clientY;
20: var correctPosition=position.matrixTransform(triangle.getScreenCTM().inverse());
21: xclick = correctPosition.x;
22: yclick = correctPosition.y;
23:
24: // Find the vertices:
25: var points = triangle.getAttributeNS(null, "points");
26: var pointsArray = points.split(" "); // Array of 3 points of the form "x,y".
27: var point1 = pointsArray[0].split(",");
28: var x1 = parseFloat(point1[0]);
29: var y1 = parseFloat(point1[1]);
30: var point2 = pointsArray[1].split(",");
31: var x2 = parseFloat(point2[0]);
32: var y2 = parseFloat(point2[1]);
33: var point3 = pointsArray[2].split(",");
34: var x3 = parseFloat(point3[0]);
35: var y3 = parseFloat(point3[1]);
36:
37: var newTriangle1 = document.createElementNS(svgNS, "polygon");
38: points = ""+xclick+","+yclick+" "+x2+","+y2+" "+x3+","+y3;
39: newTriangle1.setAttributeNS(null, "points", points);
40: newTriangle1.setAttributeNS(null, "fill", "red");
41: newTriangle1.setAttributeNS(null, "onclick", "divide(evt)");
42:
43: var newTriangle2 = document.createElementNS(svgNS, "polygon");
44: points = ""+x1+","+y1+" "+xclick+","+yclick+" "+x3+","+y3;
45: newTriangle2.setAttributeNS(null, "points", points);
46: newTriangle2.setAttributeNS(null, "fill", "yellow");
47: newTriangle2.setAttributeNS(null, "onclick", "divide(evt)");
48:
49: var newTriangle3 = document.createElementNS(svgNS, "polygon");
50: points = ""+x1+","+y1+" "+x2+","+y2+" "+xclick+","+yclick;
51: newTriangle3.setAttributeNS(null, "points", points);
52: newTriangle3.setAttributeNS(null, "fill", "blue");
53: newTriangle3.setAttributeNS(null, "onclick", "divide(evt)");
54:
55: document.documentElement.removeChild(triangle);
56: document.documentElement.appendChild(newTriangle1);
57: document.documentElement.appendChild(newTriangle2);
58: document.documentElement.appendChild(newTriangle3);
59: }
60:
61: // ]]>
62: </script>
63:
64: <polygon points="1,434 501,434 251,1" fill="blue" onclick="divide(evt)"/>
65:
66: </svg>
Source of triangle-click.svg:Show line numbers
<svg version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="502px" height="435px" viewBox="0 0 502 435"
stroke="black" stroke-width="0.5px">
<script>
//<![CDATA[
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
function divide(evt){
// Get the triangle that was clicked.
var triangle = evt.currentTarget;
// Get the point that was clicked:
var position = document.rootElement.createSVGPoint();
position.x = evt.clientX;
position.y = evt.clientY;
var correctPosition=position.matrixTransform(triangle.getScreenCTM().inverse());
xclick = correctPosition.x;
yclick = correctPosition.y;
// Find the vertices:
var points = triangle.getAttributeNS(null, "points");
var pointsArray = points.split(" "); // Array of 3 points of the form "x,y".
var point1 = pointsArray[0].split(",");
var x1 = parseFloat(point1[0]);
var y1 = parseFloat(point1[1]);
var point2 = pointsArray[1].split(",");
var x2 = parseFloat(point2[0]);
var y2 = parseFloat(point2[1]);
var point3 = pointsArray[2].split(",");
var x3 = parseFloat(point3[0]);
var y3 = parseFloat(point3[1]);
var newTriangle1 = document.createElementNS(svgNS, "polygon");
points = ""+xclick+","+yclick+" "+x2+","+y2+" "+x3+","+y3;
newTriangle1.setAttributeNS(null, "points", points);
newTriangle1.setAttributeNS(null, "fill", "red");
newTriangle1.setAttributeNS(null, "onclick", "divide(evt)");
var newTriangle2 = document.createElementNS(svgNS, "polygon");
points = ""+x1+","+y1+" "+xclick+","+yclick+" "+x3+","+y3;
newTriangle2.setAttributeNS(null, "points", points);
newTriangle2.setAttributeNS(null, "fill", "yellow");
newTriangle2.setAttributeNS(null, "onclick", "divide(evt)");
var newTriangle3 = document.createElementNS(svgNS, "polygon");
points = ""+x1+","+y1+" "+x2+","+y2+" "+xclick+","+yclick;
newTriangle3.setAttributeNS(null, "points", points);
newTriangle3.setAttributeNS(null, "fill", "blue");
newTriangle3.setAttributeNS(null, "onclick", "divide(evt)");
document.documentElement.removeChild(triangle);
document.documentElement.appendChild(newTriangle1);
document.documentElement.appendChild(newTriangle2);
document.documentElement.appendChild(newTriangle3);
}
// ]]>
</script>
<polygon points="1,434 501,434 251,1" fill="blue" onclick="divide(evt)"/>
</svg>