Search code examples
javascriptcsssvgsvg-animatelottie

Why is this SVG animation cut in half?

Here is the SVG animation (id="lottie404") that I'm trying to get to display full width. I'm trying to ammend the existing DOM via inspect mode.

Is there something wrong with the CSS? I've tried for hours and can't seem to find a solution. Thanks in advance

Solution

  • The problem is that you have the same svgs with the same IDs twice. An ID can only used once. So the second one references the smaller one in the head with clip-path="url(#__lottie_element_4)", because it's the first element with this ID in the DOM.
    Remove the one in the header and you will see the other will work.

    To solve this you have to use different Ids.