jquery interaction with svg path to create specific clickable area - svg

Question

I am trying to get an svg path to be 'clickable' when put into an file rather than put in-line in the document.
Basically I just want to be able to click on the filled elements of an image, not any empty areas.
I have converted my PNG image to svg and got this working, so that when I click on the filled areas the code executes as I need to, but not when clicking on any empty areas.
To do this, I have only had to put in a 'class' to the 'path' tag to make the filled areas interactive via the code.
However, if I now put this svg code into a file and load it into an element, as seems to be the way to do it from what I've read, then it won't working.
I have already added the jquery add on files below, and while these have allowed other svg functions to work it hasn't allowed for this one.
<link rel="stylesheet" type="text/css" href="assets/js/jquery.svg.css">
I am unable to interact with the internal svg path within the file even with some simple css. if I put the css into the file directly in a 'style' tag then the css is applied.
I am not sure where to go with this. I have several thousand images that need to have this functionality and each one has a lot of coding to create the path for the svg image so I really don't want to have to put all of these into the html document as it will be a nightmare to deal with.
I've seen people acheieving similar interactions but as yet I've not found one applying jquery or java or even a solution that will get the ability to vary css working.
here is the code for the svg, which is just using a test image rather than one of my own but works the same.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0
300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#00000" stroke="none">
<!-- The <a> tag we've added -->
<path class="imageSelector" style="cursor: pointer;" d="M4390 5952 c-113 -53 -289 -221 -427
-409 -84 -114 -98 -125 -153
-117 -171 27 -523 -80 -714 -217 l-98 -71 -97 71 c-186 137 -427 215 -661 215
l-115 0 -91 123 c-228 310 -551 543 -524 378 5 -30 19 -167 31 -305 12 -137
30 -281 40 -318 17 -66 13 -74 -119 -213 -336 -354 -415 -830 -210 -1265 l50
-106 -38 -104 c-235 -632 -120 -1587 226 -1874 64 -53 11 -59 -607 -64 l-636
-6 -79 -55 c-242 -167 -208 -515 61 -637 75 -34 153 -37 1058 -38 l977 0 -13
-75 c-25 -132 -109 -254 -295 -425 -213 -197 -351 -454 -221 -414 553 173 689
197 799 139 298 -158 287 -155 466 -155 179 0 168 -3 466 155 110 58 246 34
799 -139 130 -40 -8 217 -221 414 -186 171 -270 293 -295 425 l-13 75 977 0
c905 1 983 4 1058 38 269 122 303 470 61 637 l-79 55 -636 6 c-618 5 -671 11
-607 64 346 287 461 1244 225 1877 l-39 107 51 103 c208 416 127 909 -208
1262 -135 141 -136 144 -120 222 10 43 27 178 39 299 13 121 27 258 32 305 5
47 7 85 5 85 -3 0 -50 -22 -105 -48z m-1960 -899 c250 -67 549 -348 550 -518
0 -19 9 -35 20 -35 11 0 20 16 20 35 1 170 300 451 550 518 734 196 1249 -740
706 -1280 -233 -231 -581 -286 -874 -138 -71 36 -130 63 -132 60 -2 -3 -61
-115 -132 -250 -70 -135 -132 -245 -138 -245 -6 0 -68 110 -138 245 -71 135
-130 247 -132 250 -2 3 -61 -24 -132 -60 -297 -151 -682 -79 -905 167 -500
553 23 1441 737 1251z m-55 -3239 c25 -23 45 -55 45 -72 0 -19 25 -1 61 43 78
95 190 105 270 26 47 -47 49 -60 49 -311 0 -251 -2 -264 -49 -311 -80 -79
-192 -69 -270 26 -40 49 -61 63 -61 41 0 -104 -198 -150 -294 -68 l-56 49 0
260 c0 246 3 262 47 310 75 79 175 82 258 7z m1146 -31 c36 -44 59 -60 59 -41
0 114 205 162 298 70 51 -52 52 -59 52 -314 l0 -261 -56 -49 c-93 -80 -294
-37 -294 63 0 16 -9 29 -20 29 -11 0 -20 -11 -20 -24 0 -108 -203 -155 -291
-67 -54 55 -75 504 -27 594 57 108 210 108 299 0z" />
<path d="M2090 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
<path d="M3590 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
</g>
</svg>
If I put this into the document, it works fine. If I load it from a file, the image renders but I can't interact with the class for the path
this is the code for the flie load option:
<object class="imageClass" type="image/svg+xml" data="ImageFile.svg"></object>
thanks for any help on this
Update:
I have tried several ways to get this to work looking at options online and the help from suggestions below but I haven't had any success in getting the svg to be clickable at all when loaded from a file.
The only way I have been able to even access the inner elements of the svg file is using the following method with jquery.svg:
(document).ready(function() {
$("#divforSVG").svg(
{
onLoad: function() { var svg = $("#divforSVG").svg('get');
svg.load('svgFile.svg', {addTo: true, changeSize: false});
},
settings: {}} );
$('#Button').click(function(e) {
var rect = $('#ImagePath');
rect.css('fill','green');
rect.attrib('fill','green');
});
});
This i found from the following link:
Modify a svg file using jQuery
This loads the svg file into an element, rather than placing the svg file within an object element in the html page, as seems to be the way suggested. This works, changing the colour by clicking on the button, and can apply this to any inner part of the svg file. However, I cannot find a way to bind a click event to the inner elements of the svg file.
The main method of accessing inner elements of the svg file using the object method, as set out in this link, I can't get to work at all to access any part of the svg element.
How to access SVG elements with Javascript
this seems to be the way to do it with normal javascript but I've not made any progress with it. If anyone has any suggestions on how I may be able to bind a click event using the jquery.svg method as set out above, or how to get the object element method working, I'd greatly appreciate it

Answer 1

If you reference a file in another file, that file is no longer part of the document object model, and Javascript can no longer interact with it. The file has its own, separate DOM.
You were right to use an <object> tag, because that gives you the possibility to bridge the gap between the two DOMs (something that would be impossible with an <img> tag). Basically, with
var childDocument = $('object.imageClass').prop('contentDocument')
you get access to the document interface of the SVG content - but only provided the linked file fullfills the same-origin policy.
Note carefully the role that jQuery plays in this. jQuery has been loaded into the parent document and is not present in the child document. So instead of selecting the SVG root element in the child document with $('svg'), you must use $(childDocument).find('svg'). You cannot traverse from one document to the other with .parent(), .children() or other traversal functions. You cannot delegate events from the child document to elements in the parent document.
The jquery-svg plugin would have to work with
var svg = $(childDocument).find('svg').svg('get')