Unités clipPath SVG : ajuster une forme à sa cible

Utilise clipPathUnits="objectBoundingBox" lorsqu’une forme de rognage doit s’étirer avec les limites de la cible. Normalise d’abord ses coordonnées. Utilise userSpaceOnUse si tu as besoin d’un placement explicite ou d’une échelle uniforme qui préserve les proportions de la forme.

Changer seulement l’attribut ne convertit pas un tracé dessiné en centaines d’unités en une forme comprise entre zéro et un. Cela peut déplacer presque tout le rognage hors de la cible. Ce guide utilise une silhouette originale de marque-page pour montrer le changement de coordonnées, la déformation obtenue et un ajustement centré qui garde l’ouverture en losange carrée.

Le rognage contrôle la visibilité. Il ne découpe pas les tracés sous-jacents en une nouvelle géométrie éditable. Si tu as déjà une silhouette SVG propre, utilise-la directement ; la vectorisation n’est pertinente que pour reconstruire cette silhouette depuis une image matricielle.

Choisir le système de coordonnées avant de redimensionner

La valeur par défaut est userSpaceOnUse. Ses coordonnées de rognage appartiennent au système de coordonnées utilisateur de l’élément qui référence le rognage. Avec objectBoundingBox, la limite supérieure gauche de la cible correspond à (0, 0) et la limite inférieure droite à (1, 1). Consulte la référence de clipPathUnits.

La boîte englobante de la cible n’est pas nécessairement le viewBox du SVG extérieur. Rogner un groupe utilise les limites de ce groupe, qui peuvent différer de celles d’un rectangle qu’il contient. Pour un premier test prévisible, applique le rognage directement à un rectangle de dimensions connues.

Comparer une cible large à une cible haute

Les limites extérieures de notre marque-page sont x=20, y=10, width=100, height=100. Son losange est un second sous-tracé du même tracé. Le test l’applique à des rectangles de 200 × 120 et 120 × 200 en unités SVG locales.

La colonne centrale remplit les limites de chaque cible, mais son losange devient large ou haut. La colonne droite préserve le losange et l’encoche inférieure, laissant de l’espace sur l’axe le plus long de la cible. Les six ouvertures restent transparentes.

Enregistre l’exemple complet ci-dessous sous clippath-comparison.svg et ouvre-le dans un navigateur. Les colonnes suivent l’ordre de l’image. La ligne du haut utilise des rectangles larges ; celle du bas des rectangles hauts. Les translations d’affichage disposent les échantillons sans changer les dimensions locales des cibles.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

La couleur bleu-vert appartient aux rectangles. Le tracé de rognage fournit leur contour visible. La capture ajoute des libellés et un damier autour de ce même SVG ; le fichier autonome a lui-même un fond transparent.

Normaliser les limites source, y compris leur origine

Pour un point (x, y) dans une source de limites (minX, minY, width, height), calcule :

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Ici, cela donne (x - 20) / 100 et (y - 10) / 100. La matrice de la définition box réalise les deux opérations sans réécrire les données du tracé :

matrix(0.01 0 0 0.01 -0.2 -0.1)

Elle fait correspondre (20, 10) à (0, 0) et (120, 110) à (1, 1). Diviser par 100 sans soustraire l’origine laisserait la forme décalée dans la cible. La correspondance par boîte englobante met ensuite le résultat normalisé à l’échelle indépendamment sur la largeur et la hauteur de la cible.

Utilise les limites réelles de la géométrie à normaliser. Un viewBox peut inclure un espace vide voulu ; ses dimensions ne sont donc pas nécessairement les limites de la silhouette. Si tu veux garder cet espace, utilise délibérément le rectangle du viewBox au lieu de mélanger accidentellement les deux mesures.

Pour un dessin importé avec des transformations imbriquées, mesure et normalise dans un seul système de coordonnées cohérent. Résous ces transformations dans un éditeur avant de copier les données brutes si tu ne peux pas en tenir compte avec certitude. La procédure d’édition SVG traite de l’examen des tracés et groupes avant livraison.

Préserver les proportions avec un seul facteur d’échelle

Pour un rectangle cible local à (0, 0), de largeur W et de hauteur H, utilise :

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

La cible large donne s=1.2, tx=16 et ty=-12. Son rognage occupe x=40..160 et y=0..120. La cible haute donne s=1.2, tx=-24 et ty=28, plaçant le rognage à x=0..120 et y=40..160.

Ce sont des matrices explicites en userSpaceOnUse ; recalcule-les lorsque les dimensions locales de la cible changent. Afficher simplement tout le SVG à une autre taille CSS met toute la composition à l’échelle. Transformer un rectangle large en rectangle haut à l’intérieur est une autre opération.

Ce calcul suppose une largeur et une hauteur source non nulles, sans rotation ni cisaillement non pris en compte. C’est un ajustement à l’intérieur : laisser de l’espace est attendu. L’étirement avec les unités de boîte englobante convient lorsque remplir la cible compte davantage que garder les proportions du motif.

Garder l’ouverture dans la géométrie de rognage

L’exemple place clip-rule="evenodd" sur chaque use dans son clipPath. Le tracé référencé contient à la fois le marque-page extérieur et le sous-tracé du losange. La règle détermine quelles régions de cette forme composée sont à l’intérieur du rognage.

Placer clip-rule sur le rectangle bleu-vert ne définit pas la règle de la forme de rognage. De même, un fill-rule utilisé pour peindre la source ne remplace pas la règle de rognage. La référence MDN de clip-rule explique sa portée dans un clipPath.

N’ajoute pas un losange blanc distinct en espérant qu’il soit soustrait au rognage. Les silhouettes enfants d’un tracé de rognage sont combinées en une région visible ; leurs couleurs de rendu n’agissent pas comme des valeurs de masque noir et blanc. Pour un trou comme celui-ci, utilise le tracé composé et sa règle d’enroulement voulue. Le guide des trous SVG remplis explique la structure sous-jacente des tracés.

Si ton dessin nécessite des bords partiellement transparents ou une visibilité fondée sur la luminance, compare clipPath et un masque SVG sur la même image. Un rognage convient à une limite géométrique ; un masque offre un autre modèle de visibilité. Pour une icône monochrome peinte avec le CSS, consulte le guide des masques CSS SVG.

Vérifier les limites et le résultat exporté

Une ligne horizontale ou verticale peut avoir une boîte englobante géométrique de hauteur ou largeur nulle, même si son contour est visible. Évite objectBoundingBox pour ces cibles et ne divise pas par une dimension source nulle lors de la normalisation. La spécification des coordonnées SVG exclut la largeur du contour de ce calcul de boîte et avertit contre ces cas dégénérés.

Avant livraison :

1. Confirme que l’identifiant du rognage référencé existe et est unique dans le document.
2. Compare des cibles larges et hautes, y compris la plus petite ouverture.
3. Vérifie les limites source et cible dans leurs systèmes de coordonnées prévus.
4. Enregistre et rouvre le SVG exporté dans l’application qui le consommera.
5. Garde la géométrie originale lorsque le rognage doit rester éditable.

La spécification CSS Masking indique que le rognage change le rendu, pas la géométrie propre de l’élément. Une machine de découpe ou une application de traitement géométrique peut donc nécessiter une vraie intersection de tracés ou une autre opération d’éditeur. Confirme les tracés obtenus dans cette application ; un aperçu navigateur correct seul n’établit pas qu’un fichier est prêt à découper.

Reconstruire une silhouette matricielle si nécessaire

PerfectVector convient lorsqu’un motif personnalisé n’existe plus qu’en PNG ou JPG et que tu as besoin de contours éditables pour le rognage. Convertis cette image en SVG, puis examine le bord extérieur, les ouvertures internes et les formes de fond indésirables avant d’extraire la silhouette. Choisis les contours à inclure ; les couleurs source ne définissent pas des intensités de rognage distinctes.

Garde un original vectoriel existant si tu en as un. Un marque-page géométrique simple peut être dessiné directement, comme cet exemple. La vectorisation ne choisit pas les unités de rognage, ne normalise pas les limites et ne réalise pas une découpe booléenne permanente. Pour des conseils plus généraux de choix de source, lis la présentation de la vectorisation d’images.

FAQ

objectBoundingBox préserve-t-il les proportions de la forme ? Non. Il fait correspondre le rognage normalisé à la largeur et à la hauteur de la cible indépendamment. Utilise une échelle uniforme en userSpaceOnUse lorsque la silhouette doit garder ses proportions.

Pourquoi changer clipPathUnits masque-t-il ma forme ? Les coordonnées du tracé peuvent encore être exprimées dans les unités source originales. Normalise-les dans le système de coordonnées relatif à la cible, y compris l’origine source, ou garde userSpaceOnUse et positionne-les explicitement.

Le rognage supprime-t-il les parties masquées de mon SVG ? Non. Il change ce qui est rendu en gardant la géométrie sous-jacente. Utilise une opération d’édition adaptée si le fichier livré nécessite des contours définitivement découpés.

Sources

1. MDN — clipPathUnits — Choix de coordonnées et interprétation par défaut en espace utilisateur.
2. MDN — clip-rule — Placement de la règle d’enroulement dans les tracés de rognage.
3. W3C — Systèmes de coordonnées SVG — Correspondance par boîte englobante, exclusion du contour et limites des dimensions nulles.
4. W3C — CSS Masking — Géométrie de rognage, silhouettes combinées et tracés sous-jacents inchangés.

Si ton rognage part d’un motif matriciel, prépare son SVG avec PerfectVector, examine la silhouette et ses ouvertures, puis teste les deux proportions cibles avant de choisir l’étirement ou un ajustement uniforme.