Adding an image to a gRaphaëlJS pie chart

Question

I am using gRaphaëlJS pie chart to create some color "buttons" for a color picker.

What I want:
When a pie chart ("button") is clicked I want an image to appear in the middle of that pie chart to indicate to the user that this button/color is selected.

Problem is: I'm failing in adding that image.

What have I tried:

1. gRaphaëlJS puts a "cover" over each pie chart so I tried to add a paletteObj.covers[0][0].setAttribute('class', palette + ' sliderPalette'); to the cover SVG element.
2. Tried to add paletteObj.series.items[i].node.setAttribute('style', "background:url('images/selected01.png')"); to the actual pie chart ("button") SVG element.

3. I tried to use jQuery to dynamically add a CSS style to my button as so:

   $('.' + palette).css('background', "url('images/selected01.png')");
   $('.' + palette).css('background-repeat', "no-repeat");
   $('.' + palette).css('background-position', "center");
   $('.' + palette).css('background-attachment', "fixed");
   $('.' + palette).css('background-color', "transparent");
   

4. I tried to simply use good old CSS:

   .sliderPalette { background: url('images/selected01.png'); }
   

5. I tried what was written here by robertc about <defs> and <pattern>

Why can't I add a BG image like to any other DOM element?

My code can be found here: http://jsfiddle.net/QBVKy/4/

I appreciate any help on this. D.

P.S - could anyone with enough reputation (1.5K) please add a tag for RaphaëlJS? I see that snap.svg has one :-)