Comment créer des chemins de clips réactifs avec le SVG en ligne ?

Chemin de clip en ligne réactif SVG

Vous êtes confronté à un problème lors de la création d'un chemin de clip réactif à l'aide de SVG en ligne. Malgré un SVG réactif, le chemin de clip appliqué n'est pas mis à l'échelle correctement.

Le problème peut résider dans la méthode de référencement des chemins de clip en SVG. Lors de la définition de chemins de clip dans un SVG en ligne, référencer le SVG lui-même pour le chemin de clip n'est pas la bonne approche.

La solution consiste à créer une définition de chemin de clip dans le fichier et référencez cette définition à partir de l'élément auquel vous souhaitez appliquer le chemin de clip, en utilisant l'attribut clip-path.

Voici un exemple :

<code class="html"><svg width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <clipPath id="myClip">
      <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>

<header id="block-header">
  <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>
</header></code>

Dans cet exemple :

• L'attribut préservationAspectRatio dans le premier SVG est défini sur aucun pour empêcher le SVG de déformer son rapport hauteur/largeur lorsqu'il est redimensionné.
• Le SVG à l'intérieur de l'élément d'en-tête a une taille nulle pour éviter d'en créer éléments sur la page.
• L'attribut clipPathUnits dans la définition du chemin de découpage est défini sur objectBoundingBox, ce qui signifie que le système de coordonnées du chemin de découpage est basé sur l'élément auquel il est appliqué.

Cela garantit que le chemin du clip évolue de manière réactive avec l'élément conteneur.

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!