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

Est-il un moyen d'afficher une image à l'intérieur de SVG Cercle ?

J'ai essayé d'ajouter l'image à l'intérieur d'un élément Svg, mais l'image ne s'affiche 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?

À l'intérieur de svg vous devez utiliser <image> pas <img>.
stackoverflow.com/questions/6249664/...
Aussi, si vous vous attendez à ce que l'image à afficher en rond, comme le remplissage du cercle, alors vous devrez utiliser <clipPath>. Une recherche sur Google pour des exemples).

OriginalL'auteur starkeen | 2015-06-17

  1. 12

    Voici un exemple d'élaborer sur Havenard du commentaire ci-dessus:

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

    Vous n'avez pas réellement dessiner un <circle> élément avec une image à l'intérieur - au lieu de cela, définir une circulaire de l'élément de chemin, et le définir comme le "clip-path' attribut sur la <image> tag.

    Ne pas utiliser un masque comme un clipPath. Utiliser un clipPath, c'est pourquoi une clipPath existe. Un masque est une operation de trame, utilise beaucoup de mémoire et il est lent.
    Oh pinaise. Bon point, Robert. Mise à jour exemple. developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/....
    Très agréable. Pour info, il semble que le remplissage attr ne fait rien ici.

    OriginalL'auteur