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

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

这是一个详细阐述哈文纳德上述评论的例子:

<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> 上的 'clip-path' 属性标签。