We Keep Coding

My SVG elements are not clickable anymore with Firefox Quantum 67.0

I have an SVG file. There are elements that can be clicked and can call functions from a JavaScript file when clicked. It works perfectly with Google Chrome, IE and earlier versions of Firefox. But I cannot make it work with Firefox 67 or later.
I have already tried to change my onmousedown function to onclick. I have found a website to view my SVG file. It also works fine.
Here is some code:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="106.892mm"
viewBox="0 0 1370.4 484.8"
width="302.154mm">
<g fill="none" fill-rule="evenodd" stroke="black" stroke-linecap="square"
stroke-linejoin="bevel"
stroke-width="1">
<g clip-path="url(#clip464)" cursor="pointer" fill="green" fill-opacity="1"
onmousedown="parent.OpenPane('mGraph');"
opacity="1"
stroke="none"
stroke-opacity="0"
transform="matrix(1,0,0,1,392,262)">
<path d="M0,0 L30,0 L30,32 L0,32 L0,0 z" fill-rule="evenodd" vector-effect="none"/>
</g>
</g>
</svg>
edit1: you can find a spesific code script on this site -> JSFiddle link!
It works with Google Chrome as expected, but not with Firefox v-69.

You have a clip-path that does not exist: clip-path="url(#clip464)"
There is no element with id clip464 in your example.
This is a known bug but you can work around it easily by removing the useless attribute.

I'm not sure you can reference any JS outside the SVG. I tried your code on Chrome. Including all JS code inside the SVG works as expected.
Alternatively, you can also attach event listeners from outside the SVG. Check out the code below:
All JS inside the SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="106.892mm"
viewBox="0 0 1370.4 484.8"
width="302.154mm">
<script type="text/ecmascript"><![CDATA[
function OpenPane(str) {
alert(str);
}
]]>
</script>
<g fill="none" fill-rule="evenodd" stroke="black" stroke-linecap="square"
stroke-linejoin="bevel"
stroke-width="1">
<g clip-path="url(#clip464)" cursor="pointer" fill="green" fill-opacity="1"
onmousedown="OpenPane('mGraph');"
opacity="1"
stroke="none"
stroke-opacity="0"
transform="matrix(1,0,0,1,392,262)">
<path d="M0,0 L30,0 L30,32 L0,32 L0,0 z" fill-rule="evenodd" vector-effect="none"/>
</g>
</g>
</svg>
JS outside SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="106.892mm"
viewBox="0 0 1370.4 484.8"
width="302.154mm">
<g fill="none" fill-rule="evenodd" stroke="black" stroke-linecap="square"
stroke-linejoin="bevel"
stroke-width="1">
<g clip-path="url(#clip464)" cursor="pointer" fill="green" fill-opacity="1"
id="sample-id"
opacity="1"
stroke="none"
stroke-opacity="0"
transform="matrix(1,0,0,1,392,262)">
<path d="M0,0 L30,0 L30,32 L0,32 L0,0 z" fill-rule="evenodd" vector-effect="none"/>
</g>
</g>
</svg>
<script type="text/ecmascript">
const el = document.getElementById('sample-id');
el.addEventListener('click', () => {
document.getElementById('sample-id').setAttribute('fill', 'red');
});
el.addEventListener('mouseleave', () => {
document.getElementById('sample-id').setAttribute('fill', 'green');
});
</script>
JSFiddle

SVG tooltip disappears immediately

I've got a map with several regions and want to show a tooltip with its name when hovering over it.
The tooltip will display but disappears immediately. It doesn't matter where I put the tooltip (g, a or polygon), but I believe the g-node is the right place.
Example with three circles:
https://codepen.io/suntrop/pen/BmLZzN
<svg width="246px" height="64px" viewBox="0 0 246 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g class="testtooltip" title="My Tooltip" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#D8D8D8" cx="32" cy="32" r="32"></circle>
</g>
<g class="testtooltip" title="Will Show" id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#B8E986" cx="123" cy="32" r="32"></circle>
</g>
<g class="testtooltip" title="And Hide" id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#D8D8D8" cx="214" cy="32" r="32"></circle>
</g>
</svg>
The JS
$(function() {
UIkit.tooltip('.testtooltip').show();
});
When I use the tooltip on a P or IMG element the tooltip stays while hovering the element.

Looks like UIkit doesn't support tooltips on SVG elements. To decide whether an open tooltip should remain open, UIkit regularly calls an isVisible() function which in turn reads the target element's offsetHeight. SVG elements don't have an offsetHeight: https://www.chromestatus.com/features/5724912467574784
Thus, UIkit thinks the element is hidden and immediately hides the tooltip too.

SVG masks with transformation matrices

Well, basically I have a SVG file which coordinates are calculated taking into account the screen resolution. Nonetheless, I have now a process that sends the SVG to another computer and adjusts each object to the resolution of the receiving computer. For that, I use the transformation matrix as you can see in object "OjeB0J0NzcPolyline1507". Everything went well, until now that I have to deal with masks.
Basically, the mask crops the SVG like if the mask was applied before the transformation and since the mask has a specific size, everything that is outside the mask is cropped. Nonetheless, I have already tried to make the svgjsRubberRect bigger and anything seems to work.
Is there any way to adjust the mask so the whole object is shown with exception to what is covered by the element"OjeB0J0NzcPath1519"
EDIT:
Original SVG:
<g id="canvas">
<polyline fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" > </use>
</mask>
</defs>
</svg>
Scaled SVG:
<svg id="zxjzF2hIO8Svg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">
<polyline transform="matrix(0.312592 0 0 0.462912 0 0)" fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable" transform="matrix(0.312592 0 0 0.462912 0 0)"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" transform="matrix(3.19906 0 0 2.16024 0 0)"> </use>
</mask>
</defs>
</svg>

Width of SVG:g using getBBox() returns wrong number

Hi I tried getting the width of a <g> element and it always says 509.5 pixel no matter what.
At first I though it was the REAL size, as in not scaled size.
But I opened the SVG in Illustrator and the width was 700+ pixel.
I made a JSFiddle here http://jsfiddle.net/hrsetyono/v51phqww/
Any solution?
Thanks
EDIT
I tried it on Chrome, but it has the same behavior in Firefox

509.5px is its real size, in the user space (the svg document's one).
If you remove the viewBoxattribute and reopen it with illustrator, it will give you a width of 509.5px.
Now, if you wish to get its size in the window (DOM) space, use element.getBoundingClientRect().
$(document).ready(function() {
var $screen = $("#screen")[0];
var screenWidth = $screen.getBoundingClientRect().width;
log("width is " + screenWidth);
// try changing the width in CSS and the console always still shows 509.5
});
function log(data){
$('#log').text(data);
}
#macbook {
width: 400px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="macbook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 669.9 387.8">
<g>
<line fill="none" stroke="#939598" stroke-miterlimit="10" x1="546" y1="356.5" x2="548" y2="365.6"/>
<line fill="none" stroke="#939598" stroke-miterlimit="10" x1="122.7" y1="356.5" x2="120.5" y2="365.6"/>
<path fill="none" stroke="#939598" stroke-width="1.5" stroke-miterlimit="10" d="M64.9,365c-0.9-2.2-1.4-4.5-1.4-7l0-337.5
c0-10.4,8.4-18.8,18.8-18.8l505.4,0c10.4,0,18.8,8.4,18.8,18.8l0,337.5c0,2.5-0.5,5-1.4,7.2"/>
<path fill="none" stroke="#939598" stroke-miterlimit="10" d="M586.4,356.5l-502.7,0c-16.8,0-17.1,0-17.1-17.1l0-317.3
C66.5,12.6,74.2,5,83.7,5l502.7,0c9.5,0,17.1,7.7,17.1,17.1l0,317.3C603.5,356.5,603.5,356.5,586.4,356.5z"/>
<g id="screen">
<path fill="#939598" d="M588.3,24.3v320.3H81.8V24.3H588.3 M588.3,22.8H81.8c-0.8,0-1.5,0.7-1.5,1.5v320.3c0,0.8,0.7,1.5,1.5,1.5
h506.5c0.8,0,1.5-0.7,1.5-1.5V24.3C589.8,23.5,589.1,22.8,588.3,22.8L588.3,22.8z"/>
</g>
<circle fill="none" stroke="#939598" stroke-miterlimit="10" cx="335" cy="14.2" r="2.8"/>
<rect x="1.6" y="365.6" fill="none" stroke="#939598" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10" width="666.7" height="11.2"/>
<path fill="none" stroke="#939598" stroke-width="1.5" stroke-miterlimit="10" d="M668.4,376.8c0,0-10.4,9.1-41.4,9.1
c-31,0-584.7,0-597.3,0s-28-9.1-28-9.1"/>
<path fill="#939598" d="M440.8,383.1h-5.3c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h5.3c0.8,0,1.5,0.7,1.5,1.5v0
C442.3,382.4,441.7,383.1,440.8,383.1z"/>
<path fill="#939598" d="M233.5,383.1h-5.3c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h5.3c0.8,0,1.5,0.7,1.5,1.5l0,0
C235,382.4,234.3,383.1,233.5,383.1z"/>
<path fill="none" stroke="#939598" stroke-miterlimit="10" d="M288.5,365.6c0,0,0.5,6.9,8.7,6.9c8.2,0,69.2,0,76,0
c8,0,8.8-6.9,8.8-6.9"/>
</g>
</svg>
<div id="log"></div>

Changing colour using Javascript [duplicate]

I created a SVG file contains 5 polygons, then I need to embed Javascript so 4 of the polygons' color changes to Red when mouseover, and when mouseout, the color changes to Green. I tried to write the code but it didn't work, what could be the problem? Thanks for help and tips!
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
document.getElementById("test").onmouseover = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.color = "red";
}
document.getElementById("test").onmouseout = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.color = "green";
}
]]>
</script>
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<ellipse id="test" cx="1850" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<rect id="test" x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<polygon id="test" points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
</svg>

For what you are doing I would recommend using pure CSS.
Here is some working code.
svg:hover .recolor {
fill: red;
}
As you see, you can just use the :hover event in CSS to recolor the necessary elements. And set them to your default color (green), which will take effect when the user is not hovered.

You have various errors
you've two functions called changeColor, functions must have unique names
SVG does not use color to colour elements, instead it uses fill (and stroke).
id values must be unique, you probably want to replace id by class and then use getElementsByClassName instead of getElementById. If you do that you'll need to cope with more than one element though. I've not completed that part, you should try it yourself so you understand what's going on.
I've removed all but one id from my version so you can see it working on the left eye.
document.getElementById("test").onmouseover = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.fill = "red";
}
document.getElementById("test").onmouseout = function(){changeColor2()};
function changeColor2() {
document.getElementById("test").style.fill = "green";
}
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3"/>
<ellipse cx="1850" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" />
<rect x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" />
<polygon points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3"/>
</svg>