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

Posted

技术标签:

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

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

我尝试在 Svg 元素中添加图像,但图像没有出现在圆圈中。

<svg  >
<circle cx="50" cy="50" r="40"stroke="green" stroke- fill="yellow" />
<img src="starkeen_ane.jpg"/>
 </svg>

你能帮帮我吗?

【问题讨论】:

在 svg 中你应该使用 &lt;image&gt; 而不是 &lt;img&gt; ***.com/questions/6249664/… 另外,如果您希望图像显示为圆形,例如填充圆形,则必须使用&lt;clipPath&gt;。谷歌它的例子。 【参考方案1】:

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

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

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

【讨论】:

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

这可能不是最好的方法。但效果很好。您可以将其放置到相对位置并编辑顶部和左侧属性,以便您的图像位于 svg 图像的中心。同样重要的是将它放在您的svg-tag 之外。

img 
  position: relative;
  top: -30px;
  left: -70px;
<svg  >
<circle cx="50" cy="50" r="40"stroke="green" stroke- fill="yellow" />
 </svg>
<img src="http://i.stack.imgur.com/vxCmj.png"/>

【讨论】:

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

以上是关于如何在 html5 中显示 SVG 圆圈内的图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何使 ImageView 出现在圆圈内的随机位置?

圆圈内的可移动图像

如何使用 cv2.circle 在 Qlabel 内的图像上绘制一个圆圈

SVG - 具有笔划宽度的圆圈未填充铬

在python中创建圆圈以遮盖图像并计算每个圆圈内的像素

将图像更改为菜单内的圆圈