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

【问题标题】：How can I display an image inside SVG circle in html5?如何在 html5 中显示 SVG 圆圈内的图像？
【发布时间】：2015-09-03 00:20:59
【问题描述】：

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

你能帮帮我吗？

【问题讨论】：

在 svg 中你应该使用 <image> 而不是 <img>。
stackoverflow.com/questions/6249664/…
另外，如果您希望图像显示为圆形，例如填充圆形，则必须使用<clipPath>。谷歌它的例子。

标签： html image svg

【解决方案1】：

这里是一个详细说明 Havenard 上述评论的示例：

<svg width="500" height="250">
    <defs>
        <clipPath id="circleView">
            <circle cx="250" cy="125" r="125" fill="#FFFFFF" />
        </clipPath>
    </defs>
    <image 
      width="500" 
      height="250" 
      xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" 
      clip-path="url(#circleView)"
    />
 </svg>

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

【讨论】：

不要使用蒙版作为剪辑路径。使用clipPath，这就是存在clipPath 的原因。蒙版是一种光栅操作，占用大量内存且速度较慢。
哦。好点，罗伯特。更新示例。 developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/….
非常好。仅供参考，似乎填充属性在这里什么都不做。

【解决方案2】：

这可能不是最好的方法。但效果很好。您可以将其放置到相对位置并编辑顶部和左侧属性，以便您的图像位于 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"/>

【讨论】：

然后在<svg> 下填充一个与图像高度相同的空白区域。就是为了普通的事情滥用position: relative是多么糟糕。