stitchTiles
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính stitchTiles xác định cách các ô Perlin Noise hoạt động tại ranh giới.
Bạn có thể dùng thuộc tính này với phần tử SVG sau:
Ví dụ
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>
Ghi chú sử dụng
| Giá trị | noStitch | stitch |
|---|---|
| Giá trị mặc định | noStitch |
| Có thể animate | Có |
noStitch-
Giá trị này cho biết không cố gắng tạo ra chuyển tiếp mượt mà ở ranh giới của các ô chứa hàm nhiễu loạn. Đôi khi kết quả sẽ cho thấy các điểm gián đoạn rõ rệt ở ranh giới ô.
stitch-
Giá trị này cho biết user agent sẽ tự động điều chỉnh các giá trị x và y của tần số cơ sở sao cho chiều rộng và chiều cao của nút
<feTurbulence>(tức là chiều rộng và chiều cao của vùng con hiện tại) chứa một số nguyên chiều rộng và chiều cao ô cho octave đầu tiên.
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-feturbulence-stitchtiles |