Wie kann ich ein Bild im SVG-Kreis in html5?

Gibt es eine Möglichkeit, ein Bild anzuzeigen, das im inneren SVG Kreis ?

Habe ich versucht, indem das Bild im Svg-element, aber das Bild erscheint nicht im Kreis.

<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>

Können Sie mir helfen?

Innerhalb von svg, die Sie verwenden sollten <image> nicht <img>.
stackoverflow.com/questions/6249664/...
Auch, wenn Sie erwarten, dass das Bild auf Anzeige-Runde, wie füllen Sie den Kreis, dann müssen Sie <clipPath>. Google es für Beispiele.

InformationsquelleAutor starkeen | 2015-06-17

  1. 12

    Hier ist ein Beispiel erarbeiten Havenard Kommentar oben:

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

    Eigentlich nicht zeichnen <circle> - element mit einem Bild im inneren - stattdessen definieren Sie eine kreisförmige clip-Pfad, und legen Sie es als "clip-path" - Attribut auf die <image> tag.

    Nicht eine Maske verwenden, die als clipPath. Verwenden Sie eine clipPath, das ist, warum clipPath vorhanden ist. Eine Maske ist ein raster-operation, benutzt die viel Speicher und ist langsam.
    D ' Oh. Guter Punkt, Robert. Aktualisiertes Beispiel. developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/....
    Sehr schön. FYI, es scheint, dass die Füllung attr tut hier nichts.

    InformationsquelleAutor bags

Schreibe einen Kommentar