Pie Chart with Gradient
This example demonstrates the use of gradientUnits SVG attribute to create a radial gradient effect on pie sectors.
This example uses two different gradients:
gradientUnits="userSpaceOnUse"creates a gradient that is centered on the whole chart element. It uses the entire SVG canvas as the reference for the gradient position and size. This is used as the inactive fill background.gradientUnits="objectBoundingBox"(the default) with center at each Sector's center coordinates. This makes the gradient appear to radiate out from the center of each individual Sector. This is used for fill on hover.
Also uses a custom clipPath so that the thick stroke on mouse hover does not overlay other Sectors.