Chemin de clip réactif avec SVG en ligne

Lors de l'application d'un chemin de clip à un élément avec un arrière-plan, il est courant d'incorporer le SVG en ligne. Cependant, vous pouvez rencontrer des problèmes de réactivité ou d'alignement, comme le montre l'exemple ci-dessous :

Le problème

Dans cet exemple, le SVG en ligne a des dimensions explicites (4 000 px de large), qui peuvent être beaucoup plus grandes que la taille réelle de l'en-tête. Par conséquent, le chemin de détourage devient disproportionné, conduisant à un alignement inattendu.

La solution : clipPathUnits="objectBoundingBox"

Pour créer un chemin de détourage réactif, vous pouvez utiliser clipPathUnits= Attribut "objectBoundingBox" :

Avec cet attribut, la viewBox et les dimensions du SVG ne sont pas pertinentes, et le chemin du clip s'adapte à la zone de délimitation de l'élément auquel il est appliqué. Cela garantit un alignement réactif et cohérent du chemin de détourage, quelle que soit la taille de l'élément.