Javascript Click on Svg/object element dosen't trigger with mobile

Question

Hi I have a problem getting click/touch to work show it will toggle a div in the DOM outside the Svg to show, on a element inside a svg, when using object to embed the SVG. I've tried many different ways but nothing do it. Are there a friendly person here, that can give me the correct way to do this

I have tried to use touchstart I've also tried another code I have, that is not used with svg that works on both desktop and mobile. But when I use that script for this, it can't read inside the svg. It dose feel like the problem is that the mobile doesn't read in svg the same way, and therefore the code doesn't work.

I did look though a lot of the post in here, but most of them have nothing to do with click events, and I really don't have the skill to rewrite them.

so here is the structure: First I have my.

Under that I load the script ( I did try using it over the object, and in html head still nothing)

<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>

Here is the svg element I'm trying to make a click on:

<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>

Answer 1

Here you go buddy:

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);
   }

LIVE DEMO: https://jsfiddle.net/mr39e54h/

PS: Trying clicking on the text

Update: You can bind an event on the loaded svg by traversing through the children of the 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);