Provide better click-area for signs

[afucher]

Issue moved from old repo created by @akamud

We're trying to implement a feature on our app that depends on the user clicking on the symbols (planets, cusps, signs). We do this using this code:

svg g[id*="astrology-radix-planets-"],
svg g[id*="astrology-radix-cusps-"],
svg g[id*="astrology-radix-signs-"] {
    pointer-events: all;
    cursor: pointer;
}

It works, but some symbols don't have a bounding box, which makes the click very difficult.
You can see this behaviour here (I've zoomed in so it is easier to notice the problem):

Notice the Scorpio symbol has a "bounding box", so it is clickable through all its area. The same isn't true for the Libra sign, with the way it is drawn, I have to click exactly on its stroke paths, which is very difficult with no zoom, as you can imagine. This makes clicking very erratic.

Workaround

As a workaround, we've added a transparent rect for all the signs, like this:

	function createRectForClick(x, y, width, height) {
		var rect = document.createElementNS(context.root.namespaceURI, 'rect')
		rect.setAttribute('x', x - astrology.SIGNS_STROKE)
		rect.setAttribute('y', y - astrology.SIGNS_STROKE)
		rect.setAttribute('width', width)
		rect.setAttribute('height', height)
		rect.setAttribute('fill', 'transparent')
		return rect
	}

This makes the whole sign area clickable again.

Would you be interested in fixing this behaviour? I could open a PR.

[afucher]

Hey @akamud,

thanks for bringing this suggestion! Feel free to implement this behaviour.

Can you make this behaviour behind a toogle? So the developer can decide to use or not. This could be implemented using the settings options.