Comment puis-je garantir un alignement réactif des chemins de détourage lors de l'utilisation du SVG en ligne ?

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'intégrer le SVG en ligne. Cependant, vous pouvez rencontrer des problèmes de réactivité ou d'alignement, comme le montre l'exemple ci-dessous :

<code class="html"><header id="block-header">
  <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
    <defs>
      <clipPath id="myClip">
        <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z" />
      </clipPath>
    </defs>
  </svg>
</header></code>

Le problème

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

La solution : clipPathUnits="objectBoundingBox"

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

<code class="html"><svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
    </clipPath>
  </defs>
</svg></code>

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 du clip, quelle que soit la taille de l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!