I have a svg with say just rect element in it which has inline javascript function call on click. I have embedded svg in my html (electron based) using object tag. The problem is if I write javascript outside svg which has to be called on clicking rect element in svg it does not find the function defined instead throws an error saying function is not defined. But if I paste the same script inside svg tag it works fine.
Why the script written outside svg scope is not able to be found ?
html
<object class="svg" id="show-sld" data="sld_old.svg" type="image/svg+xml">
</object>
svg with inline javascript function call
<svg>
<rect style="opacity:1;fill:#000000;fill-opacity:0;" id="some-id" onclick="openDialog()"/>
</svg>
javascript
function openDialog(){
#do something
}
Works well if I paste the above script inside svg but that is not what I am looking for. Need to bring javascript outside svg tag. How to achieve this ?
Am writing the problem statement and answer based on the comments.
svg searches for function inside its own scope. In order to make svg look through the entire dom just add top.functionCall() where top is the topmost window in the window hierarchy
The solution is
<svg>
<rect id="some-id" onclick="top.openDialog()"/>
</svg>