如何在 html5 中的 SVG 圆圈内显示图像? [英] How can I display an image inside SVG circle in html5?

问题描述

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

Is there a way to display an image inside SVG Circle ?

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

I tried adding the image inside Svg element but the image does not appear in the circle.

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

你能帮我吗?

推荐答案

这里有一个例子，详细说明了 Havenard 的上述评论:

Here is an example elaborating on Havenard's comment above:

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

您实际上并没有绘制带有图像的 元素 - 相反，定义一个圆形剪辑路径，并将其设置为 上的剪辑路径"属性> 标签.

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.

这篇关于如何在 html5 中的 SVG 圆圈内显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！