我在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.tw/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
      </svg>
   </body>
</html>

更新於：2020年5月13日

9千+ 瀏覽

開啟您的職業生涯

透過完成課程來獲得認證

入門
廣告