Access SVG with code | Expert mode

Since Webflow doesn’t allow more than 10000 charchter in its custom code embeds, I had to find a way to inject an SVG image using the object method like so:

<object class="object" type="image/svg+xml" data="https://uploads-ssl.webflow.com/625044ee1e8e7a3167b3afa5/6288f57e82360f04ae1615a6_astro.svg"></object>

Now the question is, how do I access (with javascript) the document (svg) that is contained inside the object ? basically, I would like to target the svg element, and set its opacity to 0.5 Please see screenshot bellow:

Here is my codpen: https://codepen.io/leeloodallas/pen/GRQEaaq?editors=1011


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @anthonysalamin the issue why it is IMO impossible to do that without fighting CORS is that image has to be on the same domain and with SVG link you are trying get inside private #document to get<svg> tag.

When you run code on local server (I have done it now) there is no issue at all as JS and image (svg) are on same domain. I have run to similar issue I think 1 year ago when I have tried to generate average color from image with “color thief” library. It is how it is and we can do nothing about these WF pitfalls.

easily create an github repository https://stacket.app and put unlimited files in it.