Origine de transformation SVG : tourne autour du centre

Pour faire tourner une illustration SVG autour de son centre avec CSS, place les tracés liés dans un groupe et applique transform-box: fill-box et transform-origin: center à ce groupe. Applique ensuite la rotation à cet endroit. Les deux propriétés répondent à des questions différentes : quel rectangle fournit la référence, et où le pivot se situe dans ce rectangle.

Si ton icône importée décrit un grand mouvement sur la zone de dessin, examine cette référence avant de changer les coordonnées des tracés. Si ses parties tournent séparément, examine quels éléments reçoivent la transformation. Une illustration vectorielle existante nécessite généralement une correction de groupement ou de transformation ; la vectorisation n’est utile que si tu dois d’abord obtenir des tracés modifiables à partir d’une source matricielle.

Pourquoi center seul peut encore déplacer l’illustration

Pour un enfant SVG ordinaire, comme un tracé ou un groupe, l’origine de transformation par défaut est 0 0. Les éléments SVG racines ont une autre valeur par défaut. Avec transform-box: view-box par défaut, définir l’origine sur center fait référence à la zone d’affichage de référence SVG plutôt qu’aux limites propres de l’illustration. La référence MDN de SVG transform-origin explique les valeurs par défaut et ces exceptions.

L’espace vide autour d’un logo compte donc. Un petit symbole placé près d’un angle d’une grande zone de dessin n’a pas le même centre que cette zone. transform-box: fill-box passe à la boîte englobante de l’objet comme référence. Il ne recadre pas le SVG et ne retire pas l’espace vide. La référence transform-box définit les boîtes disponibles, dont stroke-box si une référence incluant le contour est nécessaire.

Fais tourner deux tracés comme un seul symbole

Enregistre cet exemple complet sous rotation.svg et ouvre-le dans un navigateur. Il utilise un carré original et un accent triangulaire détaché, tous deux placés loin de l’origine des coordonnées. Le CSS se trouve dans le SVG pour que le fichier autonome emporte sa propre règle de rotation.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Avant rotation, l’illustration combinée s’étend de x = 80 à 220 et de y = 50 à 130. Sa boîte mesure 140 unités de large et 80 de haut ; son centre est donc (150, 90). Le carré et l’accent conservent leur relation lorsque le groupe tourne.

Nous avons affiché quatre états à angle fixe de ces mêmes tracés dans un navigateur, lu leur géométrie et rouvert séparément le SVG complet ci-dessus. La comparaison utilise des zones d’affichage plus larges pour laisser de la place au résultat avec l’origine par défaut. Ce sont des tracés de démonstration créés à la main, pas une conversion PerfectVector ni un test de tous les navigateurs et éditeurs.

La version avec l’origine par défaut déplace le symbole autour de (0, 0). Les deux versions avec un groupe centré correspondent. Dans le dernier panneau, le carré tourne autour de (120, 90) tandis que l’accent triangulaire tourne autour de (195, 90). Chaque partie reste près de sa position de départ, mais le symbole ne tourne plus comme un seul objet.

Pour ton fichier, sélectionne uniquement les parties qui doivent se déplacer ensemble. Des rectangles de fond, des repères de repérage ou des tracés parasites éloignés peuvent agrandir les limites d’un groupe. Le processus de modification des SVG explique comment examiner et nettoyer le fichier avant d’ajouter un comportement.

Utilise des coordonnées explicites si le pivot est un choix de design

Un attribut de transformation SVG peut indiquer directement l’angle et le pivot. Dans l’exemple, remplace <g class="artwork"> par <g transform="rotate(35 150 90)">. Laisse les deux tracés à l’intérieur. Retirer la classe empêche aussi la transformation CSS de prendre le dessus sur l’attribut.

La forme rotate(angle cx cy) de l’attribut utilise des degrés suivis du pivot dans le système de coordonnées utilisateur actuel. Le CSS rotate(35deg) a une syntaxe différente et tire son origine de la propriété distincte. Si une transformation CSS et l’attribut SVG transform ciblent le même élément, le CSS prime. Consulte la référence MDN de l’attribut transform.

Les coordonnées explicites sont utiles pour une charnière, une aiguille ou un pivot de logo volontairement décalé. Garde-les dans le même système local que le groupe à faire tourner. Une coordonnée mesurée à l’écran n’est pas automatiquement une coordonnée à coller dans un groupe SVG imbriqué.

Si le groupe existant possède déjà une transformation de placement, conserve-la et place la rotation sur un nouveau groupe intérieur contenant l’illustration. Teste ensuite le fichier exporté. Remplacer une transformation existante peut supprimer la translation ou l’échelle qui plaçait le symbole. Si changer l’échelle déplace aussi le symbole, l’exemple d’ordre des transformations SVG montre comment translation et mise à l’échelle se combinent.

Lis les limites avant de calculer un centre

Pour un groupe simple comme cet exemple, le calcul du centre est :

cx = x + width / 2
cy = y + height / 2

Dans notre mesure de navigateur, getBBox() sur le groupe renvoyait x: 80, y: 50, width: 140 et height: 80. Sa propre rotation ne changeait pas ces valeurs de boîte locale. La documentation de getBBox distingue ces valeurs dans l’espace utilisateur de getBoundingClientRect(), dont le rectangle est relatif à la zone d’affichage du navigateur.

Pour les contours de sélection ou un viewBox ajusté, le processus des boîtes englobantes SVG montre comment convertir ces systèmes de coordonnées et vérifier les marges de contour.

Mesure l’élément que tu souhaites faire tourner. Les transformations enfants peuvent influencer les limites du groupe englobant : notre groupe aux enfants tournés séparément avait des limites différentes de la paire originale. Un conteneur, une échelle imbriquée ou une forme parasite mérite un examen avant de réutiliser les nombres simples ci-dessus.

Le centre d’une boîte n’est pas toujours le centre visuel

Le carré de cet exemple occupe bien plus de surface que son accent triangulaire. Le milieu de leur boîte combinée reste pourtant à mi-chemin entre les bords extrêmes gauche et droit. C’est une règle géométrique ; elle ne juge pas si le dessin paraît équilibré pendant la rotation.

Commence par le centre de la boîte, examine le symbole sous plusieurs angles et passe à un pivot explicite si le dessin le demande. Une aiguille d’horloge nécessite généralement son point d’attache. Un logo avec un accent décentré peut nécessiter un centre choisi par le designer. Distingue ce choix de la correction d’une origine accidentellement fondée sur la zone d’affichage.

La rotation nécessite aussi de l’espace. Un export serré autour de l’illustration non tournée peut couper les angles après rotation. Laisse assez de place dans la zone d’affichage et examine tout découpage parent. Si tout le fichier s’importe à la mauvaise échelle, consulte le diagnostic des dimensions SVG avant de modifier les parties individuelles.

Ce processus fait tourner une forme existante sans réécrire son contour. Si ton objectif est de transformer un contour en un autre, le guide de morphing SVG traite du problème distinct de correspondance des géométries de tracés.

Prépare la source avant de définir le pivot

Si ton icône existe uniquement en PNG ou JPG et que tu dois modifier ses formes séparées, PerfectVector peut aider à préparer un candidat SVG. Convertis l’illustration en vecteur, examine sa silhouette et ses détails détachés, puis groupe les parties qui doivent tourner ensemble. Recherche les formes de fond indésirables avant de mesurer le groupe.

Une image matricielle peut tourner dans son ensemble sans vectorisation. Utilise la vectorisation lorsque la géométrie modifiable fait partie du travail. Si tu possèdes déjà un original vectoriel utilisable, conserve-le ; changer l’origine de transformation ne répare pas un contour endommagé, et vectoriser une copie matricielle ajoute une étape de reconstruction inutile.

Avant livraison, rouvre le SVG exact dans sa destination. Confirme que les parties prévues tournent ensemble, que le pivot reste à l’endroit choisi et que l’illustration tournée a assez de place. Conserve un original inchangé pour les modifications ultérieures. Les articles du blog sur les processus SVG traitent des vérifications associées de préparation et d’export.

FAQ

Pourquoi transform-origin: center fait-il tourner mon SVG autour de la zone de dessin ? Pour un enfant SVG utilisant la référence view-box par défaut, center désigne la zone d’affichage de référence SVG. Définis transform-box sur fill-box sur l’élément à faire tourner si tu souhaites plutôt sa boîte englobante d’objet.

Dois-je faire tourner le groupe ou chaque tracé ? Fais tourner le groupe lorsque les parties doivent se déplacer comme un seul symbole. Appliquer fill-box et center à chaque tracé donne un pivot à chaque partie, ce qui change leur disposition combinée.

fill-box center donne-t-il un aspect équilibré à un logo asymétrique ? Il sélectionne le centre de la boîte englobante de l’objet. L’équilibre visuel peut nécessiter un autre pivot : examine donc le logo sous plusieurs angles et choisis des coordonnées explicites si nécessaire.

Sources

1. MDN — SVG transform-origin — Définit les origines SVG par défaut, les exceptions racines et la relation à la boîte de référence.
2. MDN — transform-box — Définit les boîtes de référence d’objet, de contour et de zone d’affichage.
3. MDN — SVG transform — Décrit les coordonnées de rotation explicites, les transformations de groupe et la priorité CSS.
4. MDN — getBBox — Explique les mesures géométriques locales et leur différence avec les rectangles de zone d’affichage.

Tu as besoin de formes modifiables à partir d’une source matricielle ? Prépare un SVG avec PerfectVector, examine les parties reconstruites, puis groupe-les et vérifie le pivot choisi dans le fichier exporté final.