web-dev-qa-db-fra.com

Remplissez l'élément de chemin SVG avec une image d'arrière-plan sans mosaïque ni mise à l'échelle

Je voudrais faire quelque chose de très similaire à Remplir l'élément de chemin SVG avec une image d'arrière-plan sauf que la solution proposée y tuile l'image pour remplir toute la zone d'arrière-plan. Je n'en veux pas. Si l'image ne remplit pas toute la hauteur ou toute la largeur, alors je voudrais juste qu'elle soit centrée dans la forme du chemin et que ce soit ça. Si j'essaie de restreindre le comportement en modifiant les attributs hauteur/largeur, le rendu redimensionne simplement l'image jusqu'à ce qu'elle remplisse au moins l'une des dimensions.

Je suppose que ce comportement est quelque peu logique car il utilise des modèles. Je peux voir que ce que je veux n'est pas vraiment un "modèle" en soi. Je veux juste gifler une image au milieu de ma forme telle qu'elle est, pas en faire un motif. Cependant, je veux que les limites de forme définies par mon chemin SVG coupent le rendu de l'image, chaque fois que la taille de l'image dépasse ces limites. Je ne sais pas comment obtenir ce comportement en plus de l'utilisation d'un modèle pour l'attribut fill, comme cela se fait dans la réponse à cette question.

Dans une question similaire: Ajouter une image d'arrière-plan (.png) à une forme de cercle SVG , l'utilisateur tout en bas semble indiquer qu'il a utilisé un filtre plutôt qu'un motif pour réaliser ce que je suis cherchant à réaliser. Cependant, lorsque j'essaye, aucune considération n'est accordée à la forme réelle lors du rendu. L'image est rendue sans aucun égard aux limites de forme, ce qui semble à peu près inutile.

Existe-t-il un moyen dans SVG d'obtenir ce comportement d'image d'arrière-plan semblable à un motif mais sans réellement mettre l'image en mosaïque dans un motif?

htmlimagesvgbackground-image
15
Michael

Faites simplement correspondre les x, y, width et height du modèle à la zone de délimitation de votre chemin. Vous pouvez simplement utiliser "0", "0", "1" et "1" respectivement ici parce que patternUnits par défaut est objectBoundingBox, donc les unités sont exprimées par rapport à la boîte englobante. Ensuite, faites en sorte que l'image de votre motif contienne également width et height de la zone de délimitation du chemin. Cette fois, vous devrez cependant utiliser des tailles "réelles".

L'image sera automatiquement centrée dans le motif car la valeur par défaut de preserveAspectRatio pour <image> fait exactement ce que vous voulez.

<svg width="600" height="600">
  
  <defs>
      <pattern id="imgpattern" x="0" y="0" width="1" height="1">
        <image width="120" height="250"
               xlink:href="http://lorempixel.com/animals/120/250/"/>
      </pattern>
  </defs>
  
  
  
  <path fill="url(#imgpattern)" stroke="black" stroke-width="4"
        d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />

</svg>
21
Paul LeBeau