我在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年5月13日

9千+ 浏览

开启您的职业生涯

通过完成课程来获得认证

入门
广告