Hello,
I want to create an SVG with several circles. These shall be filled with an radial gradient (transparency to the edges) with different colors. As I am going to have several hundreds of these circles and want to have the colors still be easily customizable in CSS I do not want to define several gradients with different colors.
Is there some selector which lets me query <stop>s as children of an element the gradient is applied to? Is there any trick with currentColor? As far as I see the problem is that the gradient is no children of the circle. Can you point me in the right direction?
This is what I’ve got so far:
<html><head>
<style>
.AP {
fill: url(#gradRadial);
}
.AP001 {
fill: #FF0; // yellow gradient
}
.AP002 {
fill: #0F0; // green gradient
}
</style>
</head><body>
<svg height="50%" width="100%">
<defs>
<radialGradient id="gradRadial">
<stop offset="0%" stop-color="currentColor" stop-opacity="1.0" />
<stop offset="100%" stop-color="currentColor" stop-opacity="0.0" />
</radialGradient>
</defs>
<circle class="AP AP001" cx="10%" cy="45%" r="6%" />
<circle class="AP AP002" cx="15%" cy="45%" r="6%" />
</svg>
</body></html>
Thanks in advance!
Jonny007
