Dégradés radiaux SVG : déplace le reflet avec fx et fy

Pour déplacer le reflet d’un dégradé radial SVG sans déplacer le dessin, définis fx et fy sur son <radialGradient>. Garde cx, cy, r et le chemin inchangés. Avec fr="0", le point focal commence la progression des couleurs ; le cercle final contrôle toujours son étendue extérieure. Si le reflet semble étiré, vérifie gradientUnits et la boîte englobante de la forme avant de modifier le contour.

Cette démonstration utilise un emblème hexagonal large original avec une ouverture. Nous comparons des reflets centrés et décalés, puis deux définitions de peinture choisies : une ellipse relative à l’objet et un cercle en espace utilisateur. Le SVG est créé directement en code. Aucun service de vectorisation ni éditeur n’a produit l’exemple.

Sépare le foyer du cercle final

Le dégradé radial possède un cercle de départ et un cercle final. Dans cette base, fr="0" réduit le cercle de départ à un point. fx et fy positionnent ce point ; cx, cy et r définissent le cercle final. Si les coordonnées focales ne sont pas définies, elles prennent par défaut les coordonnées centrales correspondantes. La référence de radialGradient de MDN documente ces attributs et valeurs par défaut.

Considère les deux modifications comme des tâches différentes :

La coordonnée focale horizontale est fx ; la verticale est fy. Changer les deux déplace le point de départ en diagonale. Cela ne change ni les points du chemin ni la position de son ouverture.

Copie un SVG complet avec reflet décalé

Enregistre ceci sous emblem.svg et ouvre-le dans un navigateur. Il ne dépend d’aucune image ni feuille de style externe.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

Pour créer le contrôle centré, remplace uniquement fx=".22" fy=".18" par fx=".5" fy=".5". Ne change pas les autres attributs ni les deux contours de d.

Le contour extérieur s’étend de x=0 à 160 et de y=20 à 100. Le second contour définit l’ouverture. fill-rule="evenodd" garde cette ouverture non peinte ; déplacer le dégradé ne la remplit pas. La référence de fill-rule de MDN explique la règle de croisement utilisée par ce chemin composé.

Le foyer centré se trouve dans l’ouverture : le point le plus clair lui-même est donc invisible. Tu vois tout de même la progression de couleur autour de lui sur l’anneau. Le foyer décalé tombe sur la bande pleine en haut à gauche, où l’étape de couleur la plus claire devient visible. Cette distinction aide lorsqu’une modification de coordonnées semble peu agir : le foyer peut se trouver derrière une partie transparente du signe.

Pourquoi l’emblème large donne un dégradé elliptique

Avec gradientUnits="objectBoundingBox", les coordonnées décrivent les limites de l’objet peint. Les limites de notre emblème sont 160 × 80, même si son canevas SVG mesure 200 × 120. Un cercle normalisé est projeté à travers cette boîte non carrée en ellipse. La référence de gradientUnits de MDN décrit cette projection.

Ici, cx=".5" cy=".5" correspond à (80, 60). Le rayon .6 correspond à des rayons horizontal et vertical de 96 et 48. Le foyer décalé correspond à :

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

Pour une région finale circulaire dans ce SVG sans transformation, remplace les attributs de coordonnées du dégradé par :

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

Son contrôle centré utilise fx="80" fy="60". Le rayon est maintenant de 64 unités utilisateur dans les deux directions. C’est une région finale choisie différente de l’ellipse de 96 × 48. Nous avons changé la définition des coordonnées et le rayon physique ; cette comparaison n’isole pas un simple changement d’unités. Dans chaque paire centrée/décalée, seules les coordonnées focales changent.

Utilise une peinture relative à l’objet lorsque le dégradé doit suivre les proportions de chaque forme. Utilise des valeurs explicites en espace utilisateur lorsque sa position et son étendue circulaire appartiennent aux coordonnées du dessin. Pour un dégradé partagé entre des chemins de logo distincts, consulte les unités de dégradé SVG.

Ce qu’a montré la comparaison originale du navigateur

Nous avons ouvert les quatre SVG créés dans Chrome et affiché chacun à 100 × 60 et 300 × 180 pixels CSS. La grande version facilitait l’examen du reflet en haut à gauche. Le même décalage restait visible à la petite taille, tandis que l’ouverture restait transparente dans chaque exemple.

Le rapport source du navigateur relevait un chemin, aucun élément image, des valeurs d identiques et les mêmes limites de chemin de 160 × 80 dans les quatre fichiers. Des lectures de pixels distinctes à la taille du canevas source ont confirmé la peinture modifiée :

L’échantillon en haut à gauche se trouve à la coordonnée de dessin (35, 30) ; celui de l’ouverture à (80, 60). Ces observations décrivent cette source et cette session de navigateur. Elles n’établissent ni la sortie d’un autre moteur de rendu ni le comportement d’importation d’un éditeur.

Foyer et limites de peinture

Garde le foyer à l’intérieur pendant le réglage du signe

Commence avec un foyer intérieur et fr="0". En coordonnées normalisées, la distance du point décalé au centre est d’environ .425, inférieure à notre rayon .6. Dans la version en espace utilisateur, sa distance est d’environ 51.6, inférieure à 64. Les deux choix gardent le point de départ à l’intérieur de leur cercle final dans le système de coordonnées où ce cercle est défini.

Des explications anciennes peuvent dire qu’un foyer extérieur est toujours ramené sur le cercle final. SVG 2 autorise le cercle de départ à être à l’extérieur et définit un autre comportement, notamment des zones non peintes hors de son cône de dégradé. La spécification des dégradés radiaux de SVG 2 explique ce changement. Cette base utilise des points intérieurs ; nous n’avons pas testé le rendu des foyers extérieurs entre navigateurs.

Garde spreadMethod="pad" pendant la vérification de la position. Au-delà de l’étendue du dégradé, pad utilise la couleur de la dernière étape ; repeat et reflect introduisent des répétitions qui peuvent brouiller la comparaison du foyer. La référence de spreadMethod de MDN définit ces choix.

Avant livraison, vérifie ces trois points dans l’environnement qui affichera le SVG :

1. Le reflet se trouve sur la bande pleine voulue à la taille d’affichage réelle.
2. L’ouverture reste transparente et les données de chemin correspondent toujours au maître.
3. Le cercle ou l’ellipse choisi convient aux proportions du signe.

Si les couleurs changent après exportation, examine la peinture et le contexte de livraison avec pourquoi les couleurs SVG changent après l’exportation. Déplacer le point focal est une modification de position : changer les couleurs des étapes en même temps rend la comparaison plus difficile à lire.

Sépare la récupération de géométrie du choix de peinture

Garde un maître plat de cet emblème en utilisant le même chemin avec un fond uni et en conservant son ouverture. Enregistre la version dégradée séparément pour l’illustration web qui en a besoin. Un dégradé est une peinture attribuée à un contour ; ces coordonnées focales ne définissent pas de chemins de coupe supplémentaires.

Si ton logo de départ n’existe qu’en PNG ou JPG, le vectoriseur de logos de PerfectVector peut récupérer une géométrie vectorielle à examiner avant de reconstruire cette peinture. Vérifie le contour extérieur et l’ouverture, puis définis les coordonnées du dégradé dans ton processus SVG. Un reflet matriciel ne conserve pas ses valeurs originales de fx, fy ou de rayon comme paramètres de conception récupérables. Si tu possèdes déjà des contours vectoriels propres, modifie directement leur dégradé. Le guide de vectorisation des dégradés traite de la décision de passer du matriciel au vectoriel.

Questions fréquentes

Comment déplacer le reflet d’un dégradé radial SVG ? Définis des coordonnées fx et fy explicites sur radialGradient. Garde cx, cy, r, les étapes de couleur et le chemin fixes pendant la comparaison. Avec fr à zéro, ces coordonnées focales positionnent le point de départ de la progression des couleurs.

Pourquoi un dégradé radial paraît-il elliptique dans mon SVG ? Avec les unités objectBoundingBox, un cercle normalisé est projeté à travers les limites de l’objet peint. Des limites non carrées produisent une ellipse. Dans un SVG sans transformation, des coordonnées userSpaceOnUse explicites peuvent définir une région circulaire en unités du dessin.

Déplacer le point focal remplira-t-il l’ouverture d’un logo ? Non. Le chemin composé et sa règle de remplissage déterminent l’ouverture. Cet exemple utilise evenodd et garde le même chemin dans chaque exemple ; son ouverture reste transparente lorsque le foyer bouge.

La vectorisation peut-elle retrouver les coordonnées focales du dégradé original ? Une image matricielle ne garde pas les paramètres originaux du dégradé SVG. Récupère et examine les contours si nécessaire, puis reconstruis la peinture et vérifie le reflet dans l’environnement d’affichage prévu.

Sources

1. MDN radialGradient — Attributs des cercles de départ et de fin, et leurs valeurs par défaut.
2. MDN fx — Signification de la coordonnée focale horizontale.
3. MDN fy — Signification de la coordonnée focale verticale.
4. MDN fill-rule — Remplissage pair-impair pour l’ouverture.
5. MDN gradientUnits — Limites de l’objet, espace utilisateur et projection elliptique.
6. Dégradés radiaux de SVG 2 — Géométrie du cercle de départ et changement de spécification du foyer extérieur.
7. MDN spreadMethod — Comportement de pad, repeat et reflect.