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

有没有办法在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>

---

你能帮我吗？

这可能不是最好的办法。但效果很好。您可以做的事情是将其放置在相对位置并编辑顶部和左侧属性，以便您的图像位于svg图像的中心。同样重要的是将其放置在

svg

-标记之外

img{
位置：相对位置；
顶部：-30px；
左：-70px；
}

---

下面是一个例子，详细阐述了哈夫纳德的上述评论：

---

实际上，您并没有绘制内部带有图像的

元素，而是定义一个圆形剪辑路径，并将其设置为

标记上的“剪辑路径”属性。

在svg中，您应该使用

而不是

。此外，如果您希望图像显示为圆形，例如填充圆形，然后您必须使用

。以谷歌搜索为例，然后在

下填充一个与图像高度相同的空白。这就是滥用普通事物的

位置：relative

是多么糟糕。不要用面具作为剪贴画。使用clipPath，这就是clipPath存在的原因。掩模是一种光栅操作，占用大量内存，速度很慢。说得好，罗伯特。更新的示例。很不错的。仅供参考，填充属性在这里似乎没有任何作用。