web-dev-qa-db-fra.com

Image SVG à l'intérieur du cercle

Je souhaite créer un cercle contenant une image. J'ai déjà essayé d'utiliser pattern ou filter mais aucun d'eux ne me donne le résultat attendu. Ci-dessous le code:

<svg id="graph" width="100%" height="400px">

  <!-- filter -->
  <filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%">
      <feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/>
  </filter>
  <circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/>
  
  <!-- pattern -->
  <defs>
    <pattern id="image" x="0" y="0"  height="100%" width="100%">
      <image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>
  <circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/>
</svg>

Mon but est de préserver le cercle et de lui donner une image d’arrière-plan, quelque chose comme CSS attr background-image. 

htmlsvg
12
Bla...

Un modèle fonctionnera. Il vous suffit de donner au <image> une taille. Contrairement au HTML, les images SVG ont par défaut une largeur et une hauteur de zéro.

De même, si vous souhaitez que l'image soit mise à l'échelle avec le cercle, vous devez spécifier viewBox pour le motif.

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

22
Paul LeBeau

Essaye ça,

utilisez patternUnits="userSpaceOnUse" et définissez height="100%" width="100%" sur <image>

 <defs>
    <pattern id="image" x="0" patternUnits="userSpaceOnUse" y="0" height="100%" width="100%">
      <image x="0" y="0" width="500" height="500" xlink:href="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"></image>
    </pattern>
  </defs>

Démo

2
Logz

Vous n'avez pas réellement besoin de SVG pour cela. Vous pouvez atteindre votre objectif avec l'image tag elle-même.

.avatar {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

<img src="https://connectoricons-prod.azureedge.net/kusto/icon_1.0.1027.1210.png" alt="Avatar" class="avatar">

Référez-vous ici pour une démonstration en direct

0
Sridharan