SVG FETurbulenceElement.stitchTiles 属性介绍

SVG FETurbulenceElement.stitchTiles 属性是指控制 SVG 滤镜元素中的噪声图案是否连接在一起的属性。可以设置为 true 或 false 值。

当设置为 true 值时，表示噪声图案将无缝连接在一起。这种情况下，可以使用 tiling 贴图技术，使噪声图案重复填充整个图案区域。

当设置为 false 值时，表示噪声图案将不会连接在一起。这种情况下，噪声图案只在图案区域内出现一次。

使用示例

以下代码片段演示了如何使用 SVG FETurbulenceElement.stitchTiles 属性设置噪声图案是否连接在一起：

<svg width="300" height="300">
  <defs>
    <filter id="turbulence">
      <feTurbulence type="fractalNoise" baseFrequency="0.05" stitchTiles="true" result="noise" />
      <feColorMatrix type="hueRotate" values="90" result="hue" />
      <feComposite operator="in" in="noise" in2="hue" result="turbulence" />
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="40" />
    </filter>
  </defs>
  <rect x="50" y="50" width="200" height="200" fill="none" stroke="black" filter="url(#turbulence)" />
</svg>

在上述示例中，stitchTiles 属性被设置为 true。这意味着 SVG 滤镜元素中的噪声图案将无缝连接在一起，并使用 tiling 贴图技术，使噪声图案重复填充整个图案区域。

参考链接

• MDN web docs: SVG FETurbulenceElement.stitchTiles property