Je me retrouve avec un dessin SVG avec plein d'objets (des cercles) des différentes couleurs de l'arc-en-ciel. Cependant, comme je trouve ça assez moche, j'aimerais bien les remplir avec des dégradés, histoire de faire plus joli.
Faire un dégradé en SVG, ce n'est pas compliqué :
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialGradient id="degrade" cx="50%" cy="50%" r="100%" y2="0%" spreadMethod="pad" gradientUnits="objectBoundingBox" fx="40%" fy="40%" > <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1."/> <stop offset="100%" style="stop-opacity:.0"/> </radialGradient> </defs> <ellipse cx="550" cy="300" rx="122" ry="122" style="fill:#CCCCFF;"/> <ellipse cx="550" cy="300" rx="122" ry="122" style="fill:#CCCCFF; fill:url(#degrade)"/> <ellipse cx="150" cy="300" rx="122" ry="122" style="fill:#CCCCFF; fill:url(#degrade)"/> </svg>
Malheureusement, avec ce que j'ai trouvé, soit je fais un dégradé par couleur, soit je fais un second cercle au-dessus, avec le dégradé légèrement transparent. N'y a-t-il pas moyen de faire un fill-color en deux couches ?