Is it Possible to Morph a Path with a Fill Color to a Path with an SVG <image> Background?

[pauljohnknight]

Hi

 

With the morphSVG plugin, is it possible when morphing between two path shapes to have it so that the final path shape can display a background image (say, with the SVG <image> that has been clipped so it fits the shape).

 

What would happen is you'd have one path shape with a background that is just a fill colour, and this will then morph into the new path shape showing a background image.

 

I'm thinking this probably isn't possible?

 

I've set up a pen here of two shapes morphing in case it is possible and someone can illustrate how. 
 

See the Pen jpwQgW by pauljohnknight (@pauljohnknight) on CodePen.

 

[PointC]

It's a little tricky, but could be done. You can't animate from a solid color to an image, but with some opacity tweens you can fake it. 

 

To start with a solid color and morph to a background image, you could use a clip-path (or mask) on the image and morph it too. Maybe something like this:

 

See the Pen QBgPLj by PointC (@PointC) on CodePen.

 

Another option would be to use a couple images in a pattern.

 

See the Pen WKOmbL by PointC (@PointC) on CodePen.

 

Hopefully that gives you some ideas. Happy tweening and morphing.

 

[pauljohnknight]

Hi Craig,

 

Thanks for this, that's great.  I need to up my SVG knowledge.  Also before I start playing around with this, I've just realised because the shape I'm morphing has preserveAspectRation="none" on it to make it responsive, I'm think you probably can't have an <image> in an SVG with this attribute because it will distort the image when you reduce the window size?

I've done a quick screen cast and the image was going to go inside the main dark blue polygon that morphs in this video, but I'm thinking I may have to re-think by approach to this.
 

 

[PointC]

Yup - if your SVG is set to preserveAspectRatio="none", your images in the SVG will get funky when squished.

[pauljohnknight]

Thanks Craig. I really like what you did with the image morph, so I'm going to see if I can't get to grips with that and look at tweaking the design accordingly.