我正在尝试操纵内部的元素svg
(例如圆圈或路径)。我需要动态创建它们并能够识别它们。
我从一些在线示例中窃取了一些功能,并提出了以下代码(它应该在鼠标单击时在 svg 内创建圆圈,当鼠标悬停在圆圈上时会创建一个文本标签)。但是,它没有按我的预期工作。当鼠标从左边进入元素时,elementFromPoint(x, y).id
返回valid ID "circle"
,但是当鼠标从右边进入元素时,它返回它的父 ID“mySVG”。
我无法在任何地方找到合适的解决方案,因此欢迎任何建议 - 事实上,我会尝试阅读 svg 的规范并尽可能地学习 JS,但是,理解这些对我来说仍然是一个痛苦的过程事物。非常感谢您的时间和建议!谢谢。ķ
JS小提琴:
https://jsfiddle.net/krisfiddle/2xc3tgdr/6/
编码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body, canvas, svg {position:absolute; margin:0; padding:0; border:none;}
svg {top:0; left:0;}
.circle:hover {opacity:0.5;}
</style>
</head>
<body>
<svg id="mySVG" xmlns:xlink="http://www.w3.org/1999/xlink" height="400" width="300" style="border: 1px solid black" onClick="circle()"></svg>
<script>
var w = window.innerWidth;
var h = window.innerHeight;
var x;
var y;
var color = undefined;
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event;
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
x = event.pageX;
y = event.pageY;
}
document.onmousemove = handleMouseMove;
function circle() {
var myCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
myCircle.setAttribute('id', 'circleID');
myCircle.setAttribute('class', 'circle');
myCircle.setAttributeNS(null, "cx", x);
myCircle.setAttributeNS(null, "cy", y);
myCircle.setAttributeNS(null, "r", 50);
myCircle.setAttributeNS(null, "fill", "green");
myCircle.setAttributeNS(null, "stroke", "none");
myCircle.setAttributeNS(null, "onmouseover", "getIdXY()");
myCircle.setAttributeNS(null, "onmouseout", "deleteIdXY()");
document.getElementById("mySVG").appendChild(myCircle);
}
function getIdXY() {
var elementMouseIsOver = document.
var idMark = document.createElementNS("http://www.w3.org/2000/svg", "text");
idMark.setAttributeNS(null, "x", x);
idMark.setAttributeNS(null, "y", y);
idMark.setAttributeNS(null, "fill", "red");
idMark.setAttributeNS(null, "id", "text");
document.getElementById("mySVG").appendChild(idMark);
document.getElementById("text").innerHTML = elementMouseIsOver;
}
function deleteIdXY() {
var parent = document.getElementById("mySVG");
var child = document.getElementById("text");
parent.removeChild(child);
}
</script>
</body>
</html>