SVG stitchTiles屬性用法及代碼示例

stitchTiles屬性指示邊界處的Perlin噪波圖塊的行為。隻有<feTurbulence>原語正在使用此屬性。 feTurbulence是SVG的重要過濾器原語之一，它有助於模擬自然紋理，例如雲或煙霧等。

用法:

stitchTiles = stitch | noStitch

屬性值：StitchTiles屬性接受上麵提到和下麵描述的值。

stitch:它指示用戶將自動調整基本頻率的x和y值。
noStitch:它表明未嘗試在包含湍流函數的圖塊的邊界處實現平滑過渡。

範例1：以下示例說明了itchleTiles屬性的用法。 SVG feTurbulence濾鏡基元用於創建自己的失真效果。此處，noStitch選項用於itchleTiles屬性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color:green; font-size:40px;"> 
        GeeksforGeeks 
    </h2> 
  
    <p style="margin-left:30px;"> 
        <b>SVG filter effects</b> 
    </p> 
  
    <!--SVG container for graphical images -->
    <svg viewBox="0 0 620 400" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <!--Adding filter element for  
            special effects -->
        <filter id="filterID1" x="0" y="0" 
            width="100%" height="100%"> 
              
            <!-- feTurbulence to fill the  
                region with no smoothness-->
            <feTurbulence baseFrequency="0.035" 
                numOctaves="8" seed="5" 
                stitchTiles="noStitch" /> 
            <!-- "noStitch" option is given above  
                for NO smooth noise-->
        </filter> 
  
        <!--Variations of rectangle is used -->
        <rect x="10" y="0" width="50" height="50" 
            style="filter:url(#filterID1);" /> 
  
        <rect x="10" y="0" width="50" height="50" 
            style="filter:url(#filterID1);  
            transform:translate(50px, 0);" /> 
  
        <!--translate is used for moving to new  
            location -->
        <rect x="10" y="0" width="50" height="50" 
            style="filter:url(#filterID1);  
            transform:translate(0, 50px);" /> 
  
        <rect x="10" y="0" width="50" height="50" 
            style="filter:url(#filterID1);  
            transform:translate(50px, 50px);" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color:green; font-size:30px;  
        margin-left:10px;"> 
        GeeksforGeeks 
    </h2> 
  
    <p style="margin-left:30px;"> 
        <b>SVG filter effects</b> 
    </p> 
  
    <svg viewBox="200 0 720 500" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <!-- stitchTiles attribute have values  
            as "stitch" or "noStitch"-->
        <filter id="filterID" x="0" y="0" 
            width="100%" height="100%"> 
              
            <!-- feTurbulence fills the region  
                with some content with perlin  
                turbulence function-->
            <feTurbulence baseFrequency="0.025" 
                numOctaves="8" seed="5" 
                stitchTiles="stitch" /> 
            <!-- "stitch" option is given above  
                for smooth noise -->
        </filter> 
  
        <!-- Variations of rectangle is used -->
        <rect width="50" height="50" 
            style="filter:url(#filterID);               
            transform:translate(220px, 0);" /> 
  
        <!-- Translate is used for moving  
            to new location -->
        <rect width="50" height="50" 
            style="filter:url(#filterID);  
            transform:translate(270px, 0);" /> 
  
        <rect width="50" height="50" 
            style="filter:url(#filterID);  
            transform:translate(220px, 50px);" /> 
  
        <rect width="50" height="50" 
            style="filter:url(#filterID);  
            transform:translate(270px, 50px);" /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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