Question

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

你能帮助我吗？

Answer 1

这是一个详细阐述Havenard上述评论的例子：

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

您实际上并未在内部绘制带有图像的<circle>元素 - 而是定义圆形剪辑路径，并将其设置为<image>标记上的“剪辑路径”属性。 / p>

Answer 2

这可能不是最好的方法。但它的效果非常好。您可以做的事情是将它放在相对位置并编辑顶部和左侧属性，这样您的图像就位于svg图像的中心。同样重要的是将它放在svg - 标记之外。

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

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

2 个答案: