SVG contentDocument null when SVG loads dynamic in Ionic3

Asked Oct 11 '18 at 06:55

Active Oct 11 '18 at 10:38

Viewed 28 times

I am creating mobile app using ionic framework. I have load SVG in my view as follow

<object id='svg-container' type="image/svg+xml" [data]="svgUrl" >
Your browser does not support SVG
</object>

When i trying to get SVG contentDocument with following code

var mySvg = document.getElementById("svg-container");
mySvg.addEventListener("load", function() {
    console.log((mySvg as HTMLObjectElement).contentDocument);
}, false);

Its working fine when SVG path is from internal assets folder, but it's not working when SVG loading from the server, its returning null in the content document

In the screenshot, svg-container has a document loaded, but contentDocument is returning as null
How can I get inner document when SVG is loaded from URL, not from the asset folder.
It has nothing related to the website, I am looking for the solution for the hybrid mobile app.

edited Jun 20 '20 at 09:12

Community

asked Oct 11 '18 at 06:55

Divyesh Savaliya

2,692
2
18
37

You mean you can't access the content of a cross-origin resource? That's pretty normal. – Kaiido Oct 11 '18 at 07:33
I tried to first download the file in internal storage and then load SVG, but still not working. – Divyesh Savaliya Oct 11 '18 at 07:41
I also tried downloading file, convert that to base64 and then load content. – Divyesh Savaliya Oct 11 '18 at 07:43
Yes, dataURI is seen as cross-domain. You may have more luck with blobURI, but not on IE. Loading your svg normally from the same domain should work though. – Kaiido Oct 11 '18 at 07:45
I am not running it on the website, I am compiling mobile app with ionic framework. – Divyesh Savaliya Oct 11 '18 at 07:50
Question you mark as duplicate is for website, not for mobile app. – Divyesh Savaliya Oct 11 '18 at 07:54
1

Which will run a browser instance on the device your app will run from. The Cross-Origin restrictions still apply in your ionic web-app... – Kaiido Oct 11 '18 at 08:02
But what if i load from local device storage? – Divyesh Savaliya Oct 11 '18 at 08:30
Did it with work around by doing http call on that url and get xml with ajax call. – Divyesh Savaliya Oct 12 '18 at 07:23

SVG contentDocument null when SVG loads dynamic in Ionic3

0 Answers0