Comment créer un chemin de clip réactif avec du SVG en ligne ?

Chemin de clip réactif avec SVG en ligne

Lorsque vous utilisez SVG pour créer un chemin de clip pour un élément avec un arrière-plan, il est important de comprendre comment fonctionnent viewBox etpreserveAspectRatio. L'attribut viewBox définit les dimensions du contenu du SVG, tandis que préservationAspectRatio détermine la façon dont ce contenu est mis à l'échelle et ajusté dans l'élément.

Dans votre extrait de code, vous appliquez le chemin du clip à un élément d'en-tête avec un hauteur de 100px :

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}</code>

Cependant, votre SVG a une viewBox de "0 0 4000 1696", ce qui signifie que le chemin du clip est appliqué avec une largeur de 4000px. C'est probablement beaucoup plus grand que la largeur réelle de l'élément d'en-tête, c'est pourquoi vous ne voyez pas l'effet souhaité.

Pour créer un chemin de clip réactif, vous devez définir la viewBox du SVG pour qu'elle corresponde au dimensions de l'élément auquel il est appliqué. Vous pouvez également utiliser l'attribut clipPathUnits pour spécifier que le chemin est défini en unités par rapport au cadre de délimitation de l'élément :

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}

#myClip {
  clipPathUnits: objectBoundingBox;
}</code>

Avec ces modifications, le SVG sera mis à l'échelle pour s'adapter aux dimensions de l'en-tête. élément, et le chemin du clip sera appliqué correctement.

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!