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! While you're at it, check out some resources Treehouse students have shared here.

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

HTML

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

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

Sergio Alen
Sergio Alen
26,726 Points

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.

Sergio Alen
Sergio Alen
26,726 Points

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

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

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?

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

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?