Raphael stroke opacity

Question

I have some shapes, created with paper.path() that I would like to be filled (for the purposes of clicking and dragging) and see-through. But when I set the opacity to zero, the outline (stroke) of the shapes disappears as well as the interior. Is there anyway to make only the interior of my shapes have opacity 0?

Two things I've tried:

(1) Setting the "stroke-opacity" attribute. This does seem to help, e.g. t here is still invisible:

var paper = Raphael(0, 0, "100%", "100%")var t = paper.path( ["M", 100, 100, "L", 150, 150, "L",     100, 300, "L", 100, 100] ).attr({stroke : "black", 
                                                                                     fill :     "white", 
                                                                                     opacity :     0, 
                                                                                     "stroke-    opacity" : 1})

(2) Creating opacity-1 outlines unfilled outlines of my shapes, and displaying these together with the filled but transparent originals. This works but is a pain for dragging.

Any better solutions out there?

Answer 1

You should use fill-opacity rather than opacity if you just want to make the fill transparent. Alternately you could set the fill to none.

var t = paper.path('M100 100L150 150L100 300L100 100').attr({
    'stroke': 'black', 
    'fill': 'white',
    'fill-opacity': 0,
    'stroke-width': 15,
    'stroke-opacity': 0.5,
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
});

or

var t = paper.path('M100 100L150 150L100 300L100 100').attr({
    'stroke': 'black', 
    'fill': 'none',
    'stroke-width': 15,
    'stroke-opacity': 0.5,
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
});

As for dragging, sounds like you should adjust the pointer-events property. Maybe pointer-events: 'all' will give you the result you are looking for.