Как я могу отображать изображение внутри круга SVG в html5?

Есть ли способ отображения изображения внутри 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>

Можете ли вы мне помочь?

Ответ 1

Вот пример, описывающий комментарий Хавендара выше:

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

Фактически вы не рисуете элемент <circle> с изображением внутри - вместо этого определяете круговой путь клипа и устанавливаете его как атрибут "клип-путь" в теге <image>.

Ответ 2

Возможно, это не лучший способ сделать это. но он работает очень хорошо. То, что вы можете сделать, помещает его в относительное положение и редактирует верхние и левые свойства, чтобы изображение находилось в центре вашего изображения svg. Также важно разместить его вне svg -tag.

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