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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。