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

есть ли способ отобразить изображение внутри SVG круг ?

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

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

10
html image svg

2 ответов

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

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

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

12

это, возможно, не лучший способ сделать это. но это работает очень хорошо. Вещь, которую вы можете сделать, поместите ее в относительное положение и отредактируйте верхние и левые свойства, чтобы изображение было в центре вашего изображения 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"/>
2