2

I have an object html tag and I am passing it an external SVG url through the data="" attribute.

Does anyone know how to access the SVG inside the <object>? I would like to change the styles inside the svg but I can't figure a way to access it, I have researched quite a lot but I wasn't able to find anything that is up to date. If you are aware of a way how to do this with vanilla JS or with a library then I would really appreciate it if you could help!

Also please keep in mind that as I said before, The svg is external and I do not have access to it so I can't add an Id or anything else.

<object data="https://assets.codepen.io/3/kiwi.svg" />
Why u do dis
  • 418
  • 4
  • 15
  • this might help https://stackoverflow.com/questions/22252409/manipulating-external-svg-file-style-properties-with-css/39663457 – Michal Miky Jankovský Jul 30 '21 at 10:00
  • https://stackoverflow.com/questions/35783441/include-svg-files-with-html-and-still-be-able-to-apply-styles-to-them/35788464#35788464 – loop Jul 30 '21 at 10:00
  • https://css-tricks.com/using-svg/ did you read the article where you copied this from? also read this article on why you might want to include it inline: https://css-tricks.com/pretty-good-svg-icon-system/ – cloned Jul 30 '21 at 10:05
  • This example might help too, if you can use fetch() instead of an : ```fetch('https://assets.codepen.io/3/kiwi.svg').then(response => { if (response.ok) { return response.text(); } else { throw new Error(response.statusText); } }).then(svg => document.body.innerHTML = svg );``` – loop Jul 30 '21 at 10:10
  • Thank you for all your replies guys, Unfortunately nothing worked :/ except the fetch method which is not very ideal in my situation – Why u do dis Jul 30 '21 at 11:06

0 Answers0