28172 sujets

CSS et mise en forme, CSS3

[Résolu] SVG gradient et CSS

Bonjour,

Une question certainement toute bête... Avec le code suivant: 
<linearGradient id="SVGID_1" x1="12.4741" y1="22.3052" x2="12.4741" y2="0.7921">
		<stop offset="0" style="stop-color:#CC336C"/>
		<stop offset="1" style="stop-color:#E74F89"/>
	</linearGradient>


Est-il possible d'externaliser les couleurs du dégradé dans une feuille de styles ?
L'idée est de garder la structure SVG, mais de pouvoir jouer sur les couleurs du dégradé par CSS.

Plus généralement, existe-t'il quelque part une liste des attributs SVG qu'on peut externaliser?

Merci pour votre aide Smiley cligne
Modérateur
Bonjour,

J'ai tapé sur Google "css svg stop-color".
Premier résultat : https://developer.mozilla.org/fr/docs/CSS/Premiers_pas/Graphiques_SVG

Extrait :
<radialGradient id="fade" cx="0" cy="0" r="200"
      gradientUnits="userSpaceOnUse">
    <stop id="fade-stop-1" offset="33%"/>
    <stop id="fade-stop-2" offset="95%"/>
    </radialGradient>

/* gradient */
#fade-stop-1 {
  stop-color: blue;
  }

#fade-stop-2 {
  stop-color: white;
  }


Je dirais donc oui Smiley lol
Meilleure solution
Top, merci!

J’avais cherché "dégradés svg en css", et du coup je n'étais pas tombé sur ton résultat.
Ma déclaration CSS était bien faite, l'erreur était qu'il me manquait 
gradientUnits="userSpaceOnUse"

Donc sans unité de mesure, le dégradé ne s'appliquait pas...

Merci pour le coup de main
Modifié par speedlab (05 Apr 2017 - 14:58)
Modérateur
speedlab a écrit :
J’avais cherché "dégradés svg en css", et du coup je n'étais pas tombé sur ton résultat.

La recherche Google c'est tout un art Smiley cool

Ah bah du coup je connaissait pas non plus gradientUnits ... J'utilise trop rarement de gradient en SVG. Merci pour la découverte du coup Smiley biggrin
Sujet clos
Aller à