在 HTML5 中如何在 SVG 圆内显示图像？

要在 SVG 圆中显示图像，请使用 <circle> 元素并设置剪切路径。<clipPath> 元素用于定义剪切路径。SVG 中的图像使用 <image> 元素设置。

示例

可以尝试运行以下代码以了解如何在 HTML5 中在 SVG 圆内显示图像

实时演示

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Image</title>
   <head>
   <body>
      <svg width="500" height="350">
         <defs>
            <clipPath id="myCircle">
               <circle cx="250" cy="145" r="125" fill="#FFFFFF" />
            </clipPath>
         </defs>
         <image width="500" height="350" xlink:href="https://tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
      </svg>
   </body>
</html>

更新于: 2020-05-13

9K+ 浏览

开启你的 职业生涯

通过完成课程获得认证

开始
广告