Access SVG with code | Expert mode

Design help Custom code
1

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

Screenshot 2022-05-21 170819
Screenshot 2022-05-21 1708191920×990 113 KB

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

2

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.