Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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.

https://jsfiddle.net/n9zhhp9m/

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 :)

Okey,

I managed to get the image in there.

https://jsfiddle.net/n9zhhp9m/1/

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 :)

https://jsfiddle.net/n9zhhp9m/2/

Thanks a lot!

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