I'm having trouble replicating SVG funcationality within my tests. Jasmine is successfully wired up alongside jasmine-jquery within a Sinatra web-app. The tests are for JavaScript functions associated with an SVG object. Such as:
function findMapImage() {
return $("#svg")[0].contentDocument;
}
function findRegions(map) {
return map.querySelectorAll('path');
}
And the Jasmine fixture looks something like this (I've stripped some details out):
<object id="svg" type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 484.33 547" height="500">
<path/>
<path/>
</svg>
</object>
I've added the following lines to my test:
var map = findMapImage();
console.log(map)
And the console.log yields:
#document
<html>
#shadow-root (open)
<shadow>
<head>
<body>
</shadow>
<head></head>
<body></body>
<html>
But what I SHOULD be seeing is something more like:
#document
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 484.33 547" height="500">
<defs>...</defs>
<title>...</title>
<path></path>
etc.
</svg>
I've read that 'xmlns' resources are required for svg objects of the type 'image/svg+xml.' So my best guess is that the xmlns resource isn't loading. So maybe I need to figure out how to load the remote resource or download it locally? I'm open to other thoughts.