document.elementFromPoint(x,y)可以获得x和y坐标处的元素的引用;
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script>
function create_a(evt)
{
alert(123);
var left = evt.screenX;
var top = evt.screenY;
var client_x = evt.clientX;
var client_y = evt.clientY;
alert("left="+left);
alert("top="+top);
alert("client_x=" + client_x);
alert("client_y=" + client_y);
var obj = document.elementFromPoint(left,top);
alert("obj=" + obj);
alert("obj.id=" + obj.id);
alert("obj.nodeName=" + obj.nodeName);
var obj2 = document.elementFromPoint(client_x,client_y);
alert("obj2=" + obj2);
alert("obj2.id=" + obj2.id);
alert("obj2.nodeName=" + obj2.nodeName);
/*
//var SVGDoc=evt.getTarget().getOwnerDocument();
var SVGDoc=evt.target.ownerDocument;
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");
link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");
link.appendChild(text_node);
txt.appendChild(link);
*/
}
</script>
<text id="txt" x="10" y="10">Click on the circle to create a ....</text>
<circle id = "circle_1" cx="20" cy="40" r="1.5em" style="fill:blue" οnclick="create_a(evt)"/>
</svg>
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script>
function create_a(evt)
{
alert(123);
var left = evt.screenX;
var top = evt.screenY;
var client_x = evt.clientX;
var client_y = evt.clientY;
alert("left="+left);
alert("top="+top);
alert("client_x=" + client_x);
alert("client_y=" + client_y);
var obj = document.elementFromPoint(left,top);
alert("obj=" + obj);
alert("obj.id=" + obj.id);
alert("obj.nodeName=" + obj.nodeName);
var obj2 = document.elementFromPoint(client_x,client_y);
alert("obj2=" + obj2);
alert("obj2.id=" + obj2.id);
alert("obj2.nodeName=" + obj2.nodeName);
/*
//var SVGDoc=evt.getTarget().getOwnerDocument();
var SVGDoc=evt.target.ownerDocument;
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");
link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");
link.appendChild(text_node);
txt.appendChild(link);
*/
}
</script>
<text id="txt" x="10" y="10">Click on the circle to create a ....</text>
<circle id = "circle_1" cx="20" cy="40" r="1.5em" style="fill:blue" οnclick="create_a(evt)"/>
</svg>