stitchTiles
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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 オクターブのタイルの幅と高さの整数倍に含まれていることを示しています。
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1 # element-attrdef-feturbulence-stitchtiles |