Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


img (as a background) inside svg. HOW?

I'm having a simple landing page. Just a background and then modified CIRCULUS SVG design from Sara (https://sarasoueidan.com/tools/circulus/)

I'm having two problems I can't figure out. Please help me.

  1. How can I have images inside those two donut shapes. I would like to have different pictures in left and right svg shapes.
  2. How can I make the shape rotating by draggin? Just like it is in Sara's website.


Thanks a lot!

1 Answer

You can maybe try adding the background image like this: http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image

And for the rotation you could use jquery .mousedown and .mousemove. to alter the CSS3 rotate property. Have a look at the example you provided, right click on the element and click inspect element(google chrome), then rotate the element you will see what I'm saying in action.

they are actually using transform: matrix3d, but try with transform: rotate firts just to keep it simple. then you can jump to the complicated stuff :)


I managed to get the image in there.


But it is under the donut shape and very small. What is the proper step to make it above the donut and to have it crepped as the shape + scaled/zoome right?

Got it but changing different numbers :)


Thanks a lot!

Could you now be bit more specific about the transform question. Where should I put the code and what code?