如何在html5中显示SVG圈内的图像？

Is there a way to display an image inside SVG Circle ?

有没有办法在SVG Circle内显示图像?

I tried adding the image inside Svg element but the image does not appear in the 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>

Can you help me?

你能帮助我吗?

2 个解决方案

#1

Here is an example elaborating on Havenard's comment above:

以下是一个详细阐述Havenard上述评论的例子:

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

You don't actually draw a <circle> element with an image inside - instead, define a circular clip path, and set it as the 'clip-path' attribute on the <image> tag.

实际上,您不会在内部绘制带有图像的元素 - 而是定义圆形剪辑路径,并将其设置为如何在html5中显示SVG圈内的图像？标记上的“clip-path”属性。

#2

It is maybe not the best way to do it. but it works very good. The thing you can do it place it to a relative position and edit top and left properties so you image is in the center of your svg image. Also important is to place it outside your svg-tag.

这可能不是最好的方法。但它的效果非常好。您可以做的事情是将它放在相对位置并编辑顶部和左侧属性,这样您的图像就位于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"/>

#1