Html 如何在 html5 中的 SVG 圆圈内显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30897108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display an image inside SVG circle in html5?
提问by starkeen
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?
你能帮助我吗？
回答by bags
Here is an example elaborating on Havenard's comment above:
下面是一个例子，详细说明了 Havenard 的上述评论：
http://jsfiddle.net/9zkfodwp/1/
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.
您实际上并没有<circle>在内部绘制带有图像的元素 - 相反，定义一个圆形剪辑路径，并将其设置为<image>标签上的 'clip-path' 属性。
回答by H. Pauwelyn
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"/>