Question

我在<rect>中有一个<svg>标记，而不是将visibility : hidden; css属性设置为矩形，我只是将stroke : none; fill : none;应用于它。但是onclick事件现在没有被调用。有什么方法可以在svg中获取onclick隐形矩形吗？我正在分享我的代码。 JavaScript部分内嵌在HTML中。

提前致谢。

<html>
	<head>
		<title>Demo</title>
	</head>
	
	<body>
		<svg id = "oSvg" height = "900" width = "1200"></svg>
		<script>
			var svgns = "http://www.w3.org/2000/svg";
			var rect = document.createElementNS(svgns, "rect");
			rect.setAttributeNS(null, 'x', 100);
			rect.setAttributeNS(null, "y", 200);
			rect.setAttributeNS(null, "width", "200");
			rect.setAttributeNS(null, "height", "300");
			rect.setAttributeNS(null, "transform", "matrix(1, 0, 0, 1, 0, 0)");
			rect.setAttributeNS(null, 'style', 'stroke:none; fill : none;')
			rect.setAttributeNS(null, 'onclick', 'console.log("Rect click");');
			document.getElementById("oSvg").appendChild(rect);
		</script>
	</body>
</html>

还尝试了与jQuery相同的代码，仍然找不到解决方案

<html>
	<head>
		<title>Demo</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	
	<body>
		<svg id = "oSvg" height = "900" width = "1200"></svg>
		<script>
			var svgns = "http://www.w3.org/2000/svg";
			var rect = document.createElementNS(svgns, "rect");
			rect.setAttributeNS(null, 'x', 100);
			rect.setAttributeNS(null, "y", 200);
			rect.setAttributeNS(null, "width", "200");
			rect.setAttributeNS(null, "height", "300");
			rect.setAttributeNS(null, "transform", "matrix(1, 0, 0, 1, 0, 0)");
			rect.setAttributeNS(null, 'style', 'stroke:none; fill : none;')
			document.getElementById("oSvg").appendChild(rect);
			$(rect).on('click', function() {
				console.log("hello");
			});
		</script>
	</body>
</html>

Answer 1

默认pointer-events值为visiblePainted，如果同时删除了svg形状的笔触和填充，则指针事件无法结束。

因此，如果您想继续使用visibleFill，则必须明确将其设置为visible，fill，all或fill="none"。

＆＃13;

document.querySelector('rect').onclick = function(){
  console.log('clicked on the rect');
}

＆＃13;

svg {border: 1px solid;}

＆＃13;

<svg>
<rect pointer-events="all" fill="none" x="0" y="0" width="300" height="150"/>
</svg>

＆＃13;

~~或者，您可以将填充设置为透明。~~（我已经告诉它实际上并不是一个好主意，即使它会起作用......）

另请注意

setAttributeNS(null,...只是setAttribute(...
强烈建议不要添加事件侦听器作为属性，因为这意味着您只能从全局范围运行回调。

Answer 2

我使用implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support.constraint:constraint-layout:1.1.0' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.google.firebase:firebase-core:15.0.0'而不是fill: none。它正在发挥作用。如果你没事，请告诉我。

opacity: 0

如何将鼠标事件附加到隐藏的SVG元素？

2 个答案: