The below piece of code works fine in my firefox browser and the same file when i run in the chrome i am facing an issue
<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</head>
<body>
<embed src='first.svg' type='image/svg+xml' id='test'/>
<script>
$(document).ready(function() {
var embed = document.getElementById('test');// getting undefined
embed.addEventListener('load', function(){
var svg = embed.getSVGDocument(); //getting null
var pathElements = svg.getElementsByTagName('path');
for(var i=0;i<pathElements.length;i++){
$(pathElements[i]).bind('click', function() {
alert($(this).attr('id'));
});
}
});
});
</script>
</body>
</html>
ERROR
Uncaught DOMException: Failed to execute 'getSVGDocument' on 'HTMLEmbedElement': Blocked a frame with origin "null" from accessing a cross-origin frame.
Question:
why this is working in firefox and not in chrome is there any specific document object should be provided for chrome.
