1

I'm trying to use Raphael's VML functionality for generating a circle with an image (fix for IE8 that lacks border-radius).

My problem is that if I use

circle.attr({fill: 'url(image.jpg)'});

and my image is larger than the circle the image is only partially showed and I can't find a way to downscale the image to the diameter of the circle.

How can I do this?

tirithen
  • 3,219
  • 11
  • 41
  • 65

1 Answers1

2

Are you serious about fixing IE8 border-radius with RaphaelJS? I would suggest something like css3pie and there is even question in SO about usage.

But still, if you want to use RaphaelJS, you will need to use Element.transform to scale your image and only afterwards, set up rounded corners effect with another element.

Community
  • 1
  • 1
Deele
  • 3,728
  • 2
  • 33
  • 51
  • 1
    Yes I am serious, it's a graphical tree with each item rounded so it's not buttons here and there. All of the items are gathered on ine place, I have solved the positioning but the fill image does not scale. I'll try with transform. css3pie was my first candidate but it could not handle border radius on an element with child elements, they will not have their corners cut. – tirithen May 05 '12 at 09:25
  • Tirithen, you should show bit more from your situation, some client side code to reproduce your exact situation. – Deele May 05 '12 at 09:46
  • @Deele - you cant use Element.transform to scale image which is set as a fill pattern. Question is clear enough - it's not about border-radius but about scaling circle's fill image to fit the circle. You also don't need more code to know what's the problem. Tirithen - You should check this solution, as I had the same problem: http://stackoverflow.com/questions/1098994/scaling-a-fill-pattern-in-raphael-js And this solution works in this case. You just need to set correct Width and Height, probably the same as your circle. – Karol Jan 16 '13 at 22:44