web-dev-qa-db-ja.com

html5のSVGサークル内に画像を表示するにはどうすればよいですか？

SVG Circleの中に画像を表示する方法はありますか？

Svg要素内に画像を追加しようとしましたが、画像が円に表示されません。

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

手伝って頂けますか？

htmlimagesvg
11
starkeen

次に、上記のHavenardのコメントを詳しく説明する例を示します。

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

実際には、内部に画像を含む<circle>要素を描画しません。代わりに、円形のクリップパスを定義し、<image>タグの 'clip-path'属性として設定します。

14
bags

たぶんそれが最善の方法ではありません。しかし、それは非常にうまく機能します。できることは、それを相対的な位置に配置し、上下のプロパティを編集して、画像がsvg画像の中心にくるようにします。また、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