Streaming live at 10am (PST)

External SVG loaded into webflow for manipulation


#1

Live here: http://clean-treats.webflow.io/
https://preview.webflow.com/preview/clean-treats?preview=f0677e407128f3ade660058468fd554d

Hi everyone,

I'm trying to use load an interactive SVG onto my webflow page where I will use greensock to manipulate it.

I'm using this code in the embed
...object id='animation-el-1' data="//iplabs.com.au/clean-treats/scripts/ct-healthyWorld.svg" type="image/svg+xml">...object

which returns the SVG fine into webflow.

BUT the problem is accessing the internal SVG from there. No methods seem to work for me.

I'd love to hear any thoughts you might have around this. Has anyone on webflow tried to load in an external SVG before and made it interactive?

In my external JS file I'm trying to use .contentDocument but I'm having no joy at all.
mySVG = $("#animation-el-1"),
svgDoc = mySVG.contentDocument;

I realise I can do this by downloading the code and editing from there, but really do not want to lose the CMS features.

Note 1: I exceed the 5000 character limit so I can't use inline.
Note 2: There is indicators midway down the page to locate the svg... 'start animation'

Cheers



#2

Hi everyone.

I've ended up using a plugin to solve this
https://github.com/iconic/SVGInjector

works like a charm. Just in case you are interested.


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.