numOctaves
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 numOctaves xác định số lượng octave cho hàm nhiễu của primitive <feTurbulence>.
Một octave là một hàm nhiễu được xác định bởi tần số và biên độ của nó. Một turbulence được tạo bằng cách tích lũy nhiều octave với tần số tăng dần và biên độ giảm dần. Số octave càng cao thì nhiễu càng trông tự nhiên. Tuy nhiên, nhiều octave hơn cũng đòi hỏi nhiều phép tính hơn, dẫn đến tác động tiêu cực đến hiệu năng.
Bạn có thể dùng thuộc tính này với phần tử SVG sau:
Ví dụ
Ví dụ 1
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" numOctaves="1" />
</filter>
<filter id="noise2" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" numOctaves="3" />
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#noise1)" />
<rect x="220" y="0" width="200" height="200" filter="url(#noise2)" />
</svg>
Ví dụ 2
html
<svg
width="200"
height="200"
viewBox="0 0 220 220"
xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence baseFrequency="0.05" numOctaves="3" result="turbulence" />
<feDisplacementMap
in2="turbulence"
in="SourceGraphic"
scale="50"
xChannelSelector="R"
yChannelSelector="G" />
</filter>
<circle cx="100" cy="100" r="100" filter="url(#displacementFilter)" />
</svg>
Lưu ý sử dụng
| Giá trị | <integer> |
|---|---|
| Giá trị mặc định | 1 |
| Có thể animate | Có |
<integer>-
Xác định số octave. Giá trị âm không được phép.
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-feturbulence-numoctaves |