stitchTiles
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
stitchTiles 属性は、パーリンノイズのタイルが境界線でどのように振る舞うかを定義します。
この属性は、次の SVG 要素で使用することができます。
例
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" filter="url(#noise1)" />
<rect x="100" y="0" width="100" height="100" filter="url(#noise1)" />
<rect x="0" y="100" width="100" height="100" filter="url(#noise1)" />
<rect x="100" y="100" width="100" height="100" filter="url(#noise1)" />
<rect x="220" y="0" width="100" height="100" filter="url(#noise2)" />
<rect x="320" y="0" width="100" height="100" filter="url(#noise2)" />
<rect x="220" y="100" width="100" height="100" filter="url(#noise2)" />
<rect x="320" y="100" width="100" height="100" filter="url(#noise2)" />
</svg>
使用上のメモ
| 値 | noStitch | stitch |
|---|---|
| デフォルト値 | noStitch |
| アニメーション | 可 |
noStitch-
この値は、タービュランス関数が含まれているタイルの境界において、滑らかな遷移を意図的に行わないことを示しています。場合によっては、タイルの境界線に明らかな不連続性が表示されることがあります。
stitch-
この値は、ユーザーエージェントが基本周波数の x および y 値を自動的に調整し、
<feTurbulence>ノードの幅と高さ（つまり、現在のサブ領域の幅と高さ）が、第 1 オクターブのタイルの幅と高さの整数倍に含まれていることを示しています。
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-feturbulence-stitchtiles |