SVG <clipPath>用法及代碼示例

<clipPath> SVG元素用於定義clip-path屬性將使用的剪切路徑。它與CSS中的clip-path相同。

clipPath用於對區域進行一些限製，以使在該區域之外繪製的任何內容均不可見或不可見。

用法:

<clipPath></clipPath>

屬性：

clipPathUnits:此屬性定義<clipPath>元素內容的坐標係。

下麵給出的是上麵給出的函數的一些示例。

範例1：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta
            property="viewport"
            content="width=device-width,  
                    initial-scale=1.0" 
        /> 
        <title>GeeksforGeeks</title> 
    </head> 
    <style> 
        @keyframes animation1 { 
            from { 
                width:4px; 
                height:4px; 
            } 
            to { 
                width:150px; 
                height:150px; 
            } 
        } 
  
        rect { 
            animation:animation1 10s ease-in-out; 
        } 
    </style> 
    <body> 
        <div style="width:300px; height:300px;"> 
            <center> 
                <h1 style="color:green;"> 
                    GeeksforGeeks 
                </h1> 
                <h2> 
                    SVG | <clipPath> element 
                </h2> 
            </center> 
  
            <svg width="500"
                 height="500" 
                 transform="translate(100, 0)"> 
                <clipPath id="gfg"> 
                    <rect width="4"
                          height="4"></rect> 
                </clipPath> 
                <path id="path" 
                      d="M10, 30 A20, 20, 0, 0, 
                         1, 50, 30 A20, 20, 0, 0, 1, 
                         90, 30 Q90, 60, 50, 90 Q10,  
                         60, 10, 30 Z" /> 
                <use fill="green"
                     clip-path="url(#gfg)"
                     href="#path" /> 
            </svg> 
        </div> 
    </body> 
</html>

輸出：

範例2：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <meta
            property="viewport"
            content="width=device-width,  
                    initial-scale=1.0"/>  
        <title>GeeksforGeeks</title>  
    </head> 
    <style> 
        @keyframes star {from {r:0} to {r:500px}} 
  
        #gfg circle { 
        animation:star 25s ease; 
        } 
    </style> 
    <body>  
        <div style="width:300px; height:300px;"> 
            <center> 
                <h1 style="color:green"> 
                    GeeksforGeeks 
                </h1>  
                <h2> 
                    <a> Tag SVG 
                </h2>  
            </center> 
  
            <svg width="500" height="500" 
                 transform="translate(60, -40)"> 
                <clipPath id="gfg"> 
                  <circle> 
                </clipPath> 
                <path id="star" d=" 
                M 85.000 105.000 
                L 105.000 119.641 
                L 102.321 95.000 
                L 125.000 85.000 
                L 102.321 75.000 
                L 105.000 50.359 
                L 85.000 65.000 
                L 65.000 50.359 
                L 67.679 75.000 
                L 45.000 85.000 
                L 67.679 95.000 
                L 65.000 119.641 
                z 
                "/> 
                <use clip-path="url(#gfg)" 
                     href="#star" fill="red" /> 
            </svg> 
        </div> 
    </body>  
</html>

輸出：

支持的瀏覽器：此SVG元素支持以下瀏覽器：

Chrome
Edge
Firefox
IE瀏覽器
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 SVG <clipPath> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。