> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Motifs SVG : tourner le fond, garder le contour > Fais pivoter ou décale une peinture SVG répétée dans un emblème fixe avec patternTransform. Compare la rotation de l’objet entier et vérifie source, géométrie et pixels du navigateur. Source: https://perfectvector.com/fr/blog/svg-pattern-transform Language: fr Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 Pour faire pivoter un motif SVG dans une forme fixe, place `patternTransform="rotate(...)"` sur l’élément `pattern`. Garde la transformation de la forme elle-même inchangée. Pour décaler la position du dessin répété, utilise plutôt une translation sur ce même motif. Ces modifications déplacent le système de coordonnées de la peinture. Faire pivoter un groupe qui contient la forme déplace aussi sa géométrie affichée. Notre emblème creux original rend la différence visible : le contour reste droit lorsque la peinture tourne, tandis qu’un contrôle distinct sur l’objet entier incline l’emblème et son ouverture. ## Choisis l’élément qui doit bouger La [référence actuelle de patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) décrit une liste de transformations appliquée à la tuile du motif. La [définition des motifs SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) explique les systèmes de coordonnées de la tuile et sa transformation de peinture. Dans cet exemple, le motif est une petite marque coudée asymétrique répétée dans une tuile de 24 unités. La forme qui reçoit la peinture est un autre chemin : un badge asymétrique avec une ouverture rectangulaire. Séparer ces rôles rend le choix de modification plus clair. | Changement souhaité | Emplacement de l’attribut | À examiner | | ------------------------------------------ | ---------------------------- | -------------------------------------- | | Tourner le champ de motifs répétés | patternTransform sur pattern | Direction du motif et réseau de tuiles | | Décaler la position du motif dans le badge | patternTransform sur pattern | Phase au contour et à l’ouverture | | Tourner le badge entier | transform sur son groupe | Contour affiché, ouverture et limites | Nous utilisons directement l’attribut SVG. La note de MDN sur l’implémentation des transformations CSS ne promet pas qu’une propriété CSS nommée `pattern-transform` fonctionnera dans ta destination. **Tourner la peinture dans le contour** ![Comparaison conceptuelle d’un emblème creux droit avec des motifs géométriques répétés avant et après la rotation de la peinture dans son contour fixe](https://perfectvector.com/blog/svg-pattern-transform/fixed-outline-paint.webp) *Illustration : change la peinture répétée tout en conservant le contour qui la reçoit. Les fichiers SVG originaux et les contrôles mesurés dans le navigateur ci-dessous fournissent les preuves réelles de géométrie et de pixels.* ## Ouvre une base complète de rotation de peinture Enregistre ce SVG sous `pattern-emblem.svg` et ouvre-le dans un navigateur. Il est autonome, sans image ni bibliothèque externe. La rotation du motif est de 30 degrés autour du point source `(100,80)` ; le groupe receveur n’a pas de transformation. ```svg ``` La règle de remplissage `evenodd` laisse le rectangle intérieur ouvert. Consulte la [référence de fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) pour la règle fondée sur les croisements. L’ouverture appartient au chemin de l’emblème : tourner la peinture répétée ne fait donc pas tourner cette ouverture. `patternUnits` et `patternContentUnits` sont tous deux explicites dans cette source. La [référence de patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) définit le système de coordonnées de la tuile. Notre [guide des unités de motif](https://perfectvector.com/fr/blog/svg-pattern-units) couvre en détail les dimensions de tuile et les coordonnées du motif. Ici, nous les gardons fixes pour isoler la transformation ; ce n’est pas une recette pour créer une répétition sans jointure. ## Compare rotation, translation et contrôle géométrique Crée trois copies de la base et change uniquement l’attribut indiqué : 1. Pour la peinture originale, retire `patternTransform` du motif. 2. Pour la peinture décalée, remplace-le par `patternTransform="translate(7 5)"`. 3. Pour le contrôle de l’objet entier, retire la transformation du motif et ajoute `transform="rotate(20 100 80)"` à l’élément receveur `g`. La copie translatée garde l’orientation du motif mais change son emplacement dans le badge. Une marque à la limite peut entrer dans la forme peinte ou en sortir. La copie tournée fait pivoter le motif et son réseau de répétition ensemble ; elle ne fait pas simplement tourner chaque motif autour de son centre. Pour le contrôle de l’objet, la [référence de l’attribut transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) documente la rotation autour d’un point choisi. Cette transformation change l’affichage de la géométrie du groupe. Sa peinture de motif ordinaire l’accompagne ; les unités de motif en espace utilisateur ne rendent pas la peinture de cet exemple globalement immobile. Commence avec une seule transformation pour diagnostiquer le résultat. Si tu combines ensuite rotation, translation et mise à l’échelle, vérifie leur ordre dans le [guide de l’ordre des transformations SVG](https://perfectvector.com/fr/blog/svg-transform-order). Combiner des transformations introduit une autre question de coordonnées que cette comparaison contrôlée évite. ## Vérifie séparément la géométrie et les pixels Nous avons rendu les quatre variantes originales dans Chrome à `200×160` et `400×320` pixels CSS. Le rapport de pixels de l’appareil du navigateur était de 2. Chaque source était aussi décodée et dessinée dans un canevas dont les dimensions du tampon correspondaient à la taille de test indiquée, ce qui permettait de lire ses pixels indépendamment de la capture. Chaque fichier contient la même chaîne `d` d’emblème et le même chemin de motif : deux éléments chemin et aucun élément image. Les empreintes des fichiers complets diffèrent parce que leurs transformations diffèrent. La boîte géométrique locale de l’emblème est `(30,25,140,110)` dans tous les cas. Cette boîte locale seule manquerait le changement de l’objet entier. Pour cet emblème polygonal, nous avons aussi transformé ses cinq sommets extérieurs avec la matrice réelle du navigateur et mesuré leur étendue affichée. Le tableau normalise le grand viewport en unités sources : | Variante | Transformation du motif | Transformation du groupe | Étendue extérieure affichée x,y,largeur,hauteur | | ------------------- | ----------------------- | ------------------------ | ----------------------------------------------- | | Originale | Aucune | Aucune | 30,25,140,110 | | Tourner la peinture | rotate(30 100 80) | Aucune | 30,25,140,110 | | Décaler la peinture | translate(7 5) | Aucune | 30,25,140,110 | | Tourner l’objet | Aucune | rotate(20 100 80) | Environ 15.41,4.38,155.50,140.99 | Les étendues normalisées concordaient aux deux tailles testées. Le contrôle de l’objet garde la même chaîne `d`, mais sa géométrie affichée change. L’égalité des données sources est donc une preuve utile de construction de chemin conservée, pas une preuve suffisante que le contour visible est resté en place. Pour les variantes de peinture seule, les tampons complets de pixels du canevas différaient de l’original à chaque taille. Au point source `(45,45)`, l’échantillon original était le fond de tuile `(244,240,228)` et celui de la peinture tournée était le motif terre cuite `(193,90,56)`, tous deux avec un alpha de 255. La translation ne changeait pas cet échantillon précis, même si son tampon global différait. Un seul point échantillonné peut manquer un décalage de peinture. À la coordonnée source `(85,80)`, l’ouverture avait un alpha nul dans les huit cas. Les limites des pixels entièrement opaques restaient aussi inchangées pour les trois variantes droites à chaque taille ; ces limites de pixels par seuil ne sont pas la même mesure que les étendues exactes des sommets du contour. Ces observations se limitent à notre source créée et à notre navigateur, pas à un certificat de compatibilité des moteurs de rendu. ## Vérifie la destination enregistrée avant livraison Garde l’emblème original comme référence géométrique et conserve le traitement de peinture dans une copie distincte. Un serveur de peinture répétée ne transforme pas chaque motif visible en forme indépendante qu’une machine de découpe ou un éditeur en aval peut sélectionner. Si cette destination exige une géométrie décomposée, prépare et examine cette décomposition séparément. Le [guide de modification SVG](https://perfectvector.com/fr/blog/how-to-edit-an-svg) couvre les changements sources plus généraux. Si le contour tourne de façon inattendue, examine son propre groupe et les transformations de ses ancêtres avant d’ajuster le motif. Si plusieurs copies en ligne partagent de façon inattendue un même traitement de peinture, donne des noms uniques à leurs ID de motif et aux références de fond correspondantes. Notre fichier de comparaison isole ces ID ; des fichiers SVG autonomes séparés ne partagent pas cet espace de noms de ressources au niveau du document. Si ton motif ou ton emblème personnalisé n’existe qu’en PNG ou JPG et que tu as besoin de contours modifiables, [prépare un SVG avec PerfectVector](https://perfectvector.com/fr/image-to-vector), examine le contour et l’ouverture, puis conserve un maître propre. Construis ensuite la répétition et choisis sa transformation de peinture dans ton code SVG. La vectorisation prépare le dessin ; elle ne conçoit pas la répétition, ne choisit pas sa phase et ne garantit pas le traitement des motifs par une destination. Des chemins propres existants peuvent passer directement à la modification du motif ; le [guide de vectorisation](https://perfectvector.com/fr/blog/what-is-image-vectorization) explique quand une conversion matricielle est utile. ## Questions fréquentes **patternTransform change-t-il les données du chemin de mon emblème ?** Dans cet exemple, il transforme la peinture du motif. La chaîne d de l’emblème reste inchangée. Examine aussi le groupe receveur et les transformations de ses ancêtres, car la géométrie affichée peut bouger sans changer d. **Puis-je décaler un motif sans le tourner ?** Oui. La variante translate(7 5) décale sa peinture tout en gardant l’orientation du motif. Garde les dimensions de tuile et la géométrie receveuse fixes pour tester l’effet. **Pourquoi le motif tourne-t-il aussi lorsque je tourne le groupe entier ?** La transformation du groupe change la géométrie receveuse affichée et sa peinture. C’est une opération différente d’une transformation placée uniquement sur l’élément pattern. **Les motifs répétés sont-ils des chemins modifiables séparés ?** Notre source possède un chemin de motif dans un serveur de peinture et un chemin d’emblème receveur. Les répétitions visibles ne sont pas des éléments de chemin créés séparément ; décompose-les et examine-les séparément si ta destination exige cette forme. ## Sources 1. [MDN — patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) — Listes de transformations de motif et note d’implémentation de l’attribut. 2. [W3C — Motifs SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — Systèmes de coordonnées des tuiles et transformation de peinture. 3. [MDN — fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Ouverture pair-impair dans le chemin receveur. 4. [MDN — transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — Rotation appliquée à la géométrie affichée d’un groupe. 5. [MDN — patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) — Système explicite de coordonnées de tuile gardé fixe dans cette comparaison. ## Explore - [Read the HTML article](https://perfectvector.com/fr/blog/svg-pattern-transform) - [SVG.js : importer un dessin, modifier un chemin, exporter](https://perfectvector.com/fr/blog/svgjs-import-export-artwork.md) - [Commandes SVG relatives : suivre le point courant](https://perfectvector.com/fr/blog/svg-relative-path-commands.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)