Hi folks,
We have a nasty bug in our new SVG-node. Found at last where it is located and found a solution. But I don't understand the problem, don't know why the fix solves it and don't know if the fix will work on all browsers. So if anybody has a better solution, that would be nice!
The users can enter an SVG string. But let's assume they use a file path to a local image (which cannot be accessed by our Javascript code running in a browser):
<svg .../>
<image xlink:href="file://c:/temp/unaccessible_image.jpg"/>
</svg>
At some point in our node, we convert this SVG string to (temporary) DOM elements:
function someFunction(svgString) {
var svgElement = $(svgStr)[0];
...
This allows us to search through the SVG easily, and we can even manipulate it. And this works fine!!
Once someFunction is completed, we don't need the temporary DOM elements anymore...
However quite some time after this function has finished (somewhere up in the call stack), an error occurs in my Chrome console log:
Not allowed to load local resource..."
So for some reason it seems that these (temporary) SVG elements are stored somewhere in memory, but I couldn't pinpoint where and why that error was raised. This also means I cannot give a code snippet here to reproduce the problem ...
So I tried some alternatives (to convert the SVG string into DOM elements):
-
Have tried to do
$(svgStr).empty()
and$(svgStr).detach()
and$(svgStr).remove()
since I read somewhere that jQuery caches those objects. But nothing helped... -
So tried to do it in Vanilla Javascript:
var svgElement = document.createElement('div'); svgElement.innerHTML = svgStr;
But same error. Even when I did
svgElement.innerHTML = ""
afterwards, the problem still occured... -
At the end I tried it with the DOMParser:
var svgElement = new DOMParser().parseFromString(svgStr, "image/svg+xml");
Now the error is gone!!! But to be honest I have no clue why this solution is better (without me cleaning up anything). Moreover from the compatibility chart it is not clear to me whether Safari iOs supports SVG in DOMParser...
Summarized the DOMParser is my only solution...
Thanks!!
Bart