Search code examples
jquerysvgjquery-animatescalemask

SVG scaling animation

I managed to get a mask working but one simple thing doesn't seem work yet. When you click on the logo with the GIF behind it, the SVG does not animate to the corresponding parent DIV which is animated with jquery. It should always stretch 100% to the parent DIV in both width and height.

You'll see what I mean when you resize the viewport it will display how it should.

See the codepen here

Solution

  • For an SVG to scale, it must have a viewBox attribute. Your logo SVG (the inlined one) does not.

    Since all the dimensions in your inline SVG are percentage values, it doesn't really matter what the viewBox values are. I just used the values from your mask SVG:

    <svg viewBox="0 0 820 820">

    http://codepen.io/anon/pen/VYVdwp