asoelist Posted December 26, 2022 Share Posted December 26, 2022 Hey forum, I was trying to figure out how to embed svg inside object tag. The first link is without using object tag. Please click here for first link. Link to comment Share on other sites More sharing options...
asoelist Posted December 26, 2022 Author Share Posted December 26, 2022 So far so good. Now I am trying to embed SVG inside the object tag. Here is second link. (I have to use s3 bucket here and not codepen. I have no idea on how to embed SVG using codepen.) I am using chrome browser. Please "View Page Source" as shown. Link to comment Share on other sites More sharing options...
asoelist Posted December 26, 2022 Author Share Posted December 26, 2022 Then on line 54 on my chrome browser lies the error. If you comment this line out, you get errors. Please refer to console on chrome browser. Is it possible to embed SVG in object tag and use Javascript's contentDocument to manipulate the SVG image? Thanks! Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 26, 2022 Solution Share Posted December 26, 2022 Hi there! What problem are you trying to solve by using an object? It's not a very common practise. It's best to just add your SVG code inline. If you want to go ahead with this object approach, If you log out 'line1' in your demo, what do you get in return? 1 Link to comment Share on other sites More sharing options...
asoelist Posted December 26, 2022 Author Share Posted December 26, 2022 10 minutes ago, Cassie said: Hi there! What problem are you trying to solve by using an object? It's not a very common practise. It's best to just add your SVG code inline. If you want to go ahead with this object approach, If you log out 'line1' in your demo, what do you get in return? 11 minutes ago, Cassie said: If you want to go ahead with this object approach, If you log out 'line1' in your demo, what do you get in return? Thanks Cassie for your prompt reply. I change the repeat from infinity (-1) to 0 and comment out line 54 on my vscode, I will get 150 lines of error. If the repeat is -1 (infinity), the errors will go on and on. Somehow the chrome browser cannot read the SVG file because it is not inline. (it is on separate file). Link to comment Share on other sites More sharing options...
asoelist Posted December 26, 2022 Author Share Posted December 26, 2022 BTW Cassie, I have read briefly the link you posted. Basically, the solution is to asynchronously fetch the image and insert the element into html page using js script. This has the effect of injecting/inlining the SVG object into DOM html page. So you don't have to use the JS's contentDocument to manipulate SVG Object. I will try it tomorrow. Thanks for the links. 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 26, 2022 Share Posted December 26, 2022 Yep - if I were you I would find a different way to add the SVG DOM into the page! That route sounds like a good plan. 2 Link to comment Share on other sites More sharing options...
asoelist Posted December 27, 2022 Author Share Posted December 27, 2022 I tried the fetch and insertAdjacentHTML approach and it worked! Saves me time on StackOverflow on finding CORS issues on my web backend. (need tweaking in my settings.py) and most importantly the ability to dynamically inserting and removing objects on the frontend which is what I want. Thanks again Cassie. 2 Link to comment Share on other sites More sharing options...
Cassie Posted December 27, 2022 Share Posted December 27, 2022 Woohoo! Brilliant! Glad you got sorted 🥳 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now