-
Posts
-
Hello there,
i hope you can help me with this, since SVG are not natively supported by Enfold. But i am pretty sure the problem is because of the theme or can at least be solved with the theme, not the graphic. Anyway.
1st Problem
On my Site I am using some animated inline SVG Graphics. Most of them work just perfectly on the Website and all of them work perfectly, when i look and open them up in Dev Tools. But especially one is displaced in a really strange way and only on a speficic Site (maybe on some sites, but i didn’t test all of them because they should be pretty similar anyway).
2nd Problem
Furthermore those graphics, that have a little transparent space above or beneath the actual graphic are being cut out by other elements. So when the Animation is using this empty / transparent space above or beneath and there is another element lets say beneath, than the lower animation is being cut.I already googled a lot and looked up the forum, but couldn’t find an answer that suits exactly my problem. I tried playing around with z-index and with the overflow property, but unfortunately without a result. The way i understand this problem it should be no big deal, but i already tried everything i could think off and have no idea what else to do.
Links with examples are provided inside the private content.
Thanks in advance, hopefully you can troubleshoot this :)
Hey hammerseo,
Thank you for the inquiry.
We are not really sure why the svg is cut off. It looks fine in the browser inspector and the parent containers’ overflow property are all set to visible.
In the “seo-betreuung” page, the width of the svg is set to 1200px. What happens when you set it to 100%?
Best regards,
IsmaelHi Ismael,
sorry for letting you wait and thanks for your quick response!
I set a fixed width on purpose, because with a width to 100% or auto the whole scaling doesn’t work. Can’t tell you why, but i have read that you should use a fixed width on animated SVGs. When i set width to 100% the SVG is just very little, scaling doesn’t work at all (see Screenshot in Private Content).
Any other ideas … ?
Thanks and Best Regards
Hi,
Unfortunately, we are still not sure why the animating objects are not visible when they overflow. We noticed that the animation is a bit different when we open the SVG file in a new tab. Are you seeing the same thing? (see private field)
Best regards,
Ismaelcan you show me the svg please.
A link to a public place would be ok.Update to Enfold 4.8.6 and use for the setting auto and a limiting height or none
EDIT – ok i found your website – these svgs do not concern to the svg defiders. – which I mistakenly assumed without seeing the page.
you have two svg on your site ( like on css ) if there are the same rules – the last one wins ;)
in your second svg there you use the same keyframe names – with different translation amounts ! ( MoveUpDown, MoveUpDownS and MoveUpDownS2 )
the setting of the second one will influence the first one and is defining the rules for those keyframes.PS: this happens a lot with classes in svg created by Illustrator.
All Illustrator Classes ( if not set have st0, st1, st2 etc. pp.)PPS: rename in one of the svg your keyframes – f.e. in the second one by MoveUpDownS3 , MoveUpDownS4, MoveUpDownS5
do not forget to insert the new names in the animation rules.i did not look completely through your svgs – if there are duplicate IDs ( or even classes – when they were determined differently ) you had to avoid that too!
Not only that this will end up in an invalid html document in case of IDs ;)Hi,
@Ismael yes i can confirm this totally. At least the “balloon / sprechblase” animates differently on the page, than on the graphic itself (local or in dev tools). But this only happens on this specific SVG, all other SVG animations work on the site just as local or in a new tab. This is what i meant describing my 1st Problem. And this exact SVG graphic you posted in private data works just perfectly on another page (see my first private data comment, although the SVG is not on the page right now). Its so strange.To summarize: 1. one of my SVG Graphics is really strangely bugged and the animation differs on the page and in dev tools / local and
2. they get cut off
@Guenni007 do you still want the svg or is it not necessary anymore? By the way you can just look it up in dev tools, the css is inside the svg already so you won’t miss anything. Thanks anyway for looking by Guenni, you helped me a lot on other occasions without knowing :)Oh @Guenni007 you answered while i was typing, i will check out your suggestions!
;) next svg info: there is a clip-path in it !
Well – a clip-path does what it is supposed to do.
If this clip-path is not present – it will show even the path’s with the translation from the second svg !EDIT: PROBLEM SOLVED
Never use same “animationnames” on SVGs placed on the same page and remember that “clip-path” can prevent overflow. Thanks again @Guenni007!
@Guenni007 you solved it !!! I changed the animationnames so they won’t be identical and now the animation works just fine. Awesome Guenni!
@Ismael fyi the overflow did not work because my SVG had “clip-path” defined. As soon as i removed it the overflow started working :)wobei ich momentan die gleich svg auf deiner Seite sehe.
Edit: but remember – there are reasons for inline clip-path in svgs. But the one – building the whole rectangle is unnecessary in this case
- You must be logged in to reply to this topic.