stitchTiles

**stitchTiles** 属性定义了 Perlin 噪声图块在边界处的行为。

您可以将此属性与以下 SVG 元素一起使用

<feTurbulence>

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="noStitch" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="stitch" />
  </filter>

  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise1); transform: translate(100px, 0);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise1); transform: translate(0, 100px);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise1); transform: translate(100px, 100px);" />

  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(220px, 0);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(320px, 0);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(220px, 100px);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(320px, 100px);" />
</svg>

使用说明

值	`noStitch` \| `stitch`
默认值	`noStitch`
可动画	是

noStitch: 此值表示不会尝试在包含湍流函数的图块边界处实现平滑过渡。有时结果会在图块边界处显示明显的间断。
stitch: 此值表示用户代理将自动调整基频的 x 和 y 值，以便<feTurbulence>节点的宽度和高度（即当前子区域的宽度和高度）包含第一个倍频程的图块宽度和高度的整数倍。

规范

规范
过滤器效果模块级别 1 # element-attrdef-feturbulence-stitchtiles

浏览器兼容性

BCD 表格仅在浏览器中加载