web-dev-qa-db-fra.com

Comment puis-je afficher une image à l'intérieur du cercle SVG en html5?

Existe-t-il un moyen d'afficher une image à l'intérieur SVG Circle?

J'ai essayé d'ajouter l'image à l'intérieur de l'élément Svg mais l'image n'apparaît pas dans le cercle.

<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
<img src="starkeen_ane.jpg"/>
 </svg>

Pouvez-vous m'aider?

htmlimagesvg
12
starkeen

Voici un exemple développant le commentaire de Havenard ci-dessus:

http://jsfiddle.net/9zkfodwp/1/

Vous ne dessinez pas réellement un <circle> élément avec une image à l'intérieur - à la place, définissez un chemin de clip circulaire et définissez-le comme l'attribut 'clip-path' sur le <image> tag.

14
bags

Ce n'est peut-être pas la meilleure façon de le faire. mais cela fonctionne très bien. La chose que vous pouvez faire est de le placer dans une position relative et de modifier les propriétés en haut et à gauche afin que votre image soit au centre de votre image svg. Il est également important de le placer en dehors de votre balise svg-.

img {
  position: relative;
  top: -30px;
  left: -70px;
}
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
 </svg>
<img src="http://i.stack.imgur.com/vxCmj.png"/>
2
H. Pauwelyn