嗨，我在点击/触摸工作时遇到问题，显示它会在 Svg 外部的 DOM 中切换一个 div，以在object用于嵌入 SVG时在 svg 内部的元素上显示。我尝试了很多不同的方法，但都没有做到。这里有没有友好的人可以给我正确的方法来做到这一点
我尝试使用touchstart我还尝试了另一个代码，该代码不适用于在桌面和移动设备上都可以使用的 svg。但是当我为此使用该脚本时，它无法在 svg 中读取。感觉问题在于移动设备不会以相同的方式读取 svg，因此代码不起作用。
我确实看过这里的很多帖子，但大多数都与点击事件无关，而且我真的没有重写它们的技巧。
所以这里是结构：首先我有我的。
在此之下，我加载了脚本（我确实尝试在对象上使用它，但在 html head 中仍然什么都没有）
<object class="nSvg" type="image/svg+xml" data="img/emne.svg"></object>
<div id="boxOpen" class="boxOpenHidden">
<div id="naturSkiferBruges">
<h2>test</h2>
<p>test</p>
</div>
</div>
<script type="text/javascript">
var nSvg = document.getElementsByClassName("nSvg")[0];
nSvg.addEventListener("load",function(){
var sSvg = nSvg.contentDocument;
var subEle = sSvg.getElementsByClassName("myclass")[0];
subEle.addEventListener("click",function(){
$('#boxOpen').toggleClass('boxOpenVis');
}, false);
}, false);
</script>
这是我试图点击的 svg 元素：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="2000" viewBox="0 0 1920 2000">
<text class="myclass" data-name="myclass" x="158.25" y="1298.112">Hvor kan Kobbertag et bruges?</text>
</svg>
给你哥们：
HTML：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="2000" viewBox="0 0 1920 2000" class="nSvg">
<text class="myclass" data-name="myclass" x="158.25" y="1298.112">Hvor kan Kobbertag et bruges?</text>
</svg>
JS：
var Svg = document.getElementsByClassName("nSvg")[0];
let texts = Svg.getElementsByClassName("myclass");
for (text of texts) {
text.addEventListener("click", function() {
alert("OK");
}, false);
}
现场演示：https : //jsfiddle.net/mr39e54h/
PS：尝试点击文字
更新：您可以通过遍历所加载的SVG事件绑定children的contentDocument。
var nSvg = document.getElementsByClassName("nSvg")[0];
nSvg.addEventListener("load", function() {
var text = nSvg.contentDocument.getElementsByClassName('myclass')[0];
text.addEventListener("click", function() {
$('#boxOpen').toggleClass('boxOpenVis');
}, false);
}, false);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句