numOctaves

Базовая поддержка Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она поддерживается браузерами с ⁨января 2020⁩ года.

Атрибут numOctaves задаёт количество октав для функции шума примитива <feTurbulence>.

Октава — это функция шума, определяемая частотой и амплитудой. Турбулентность создаётся путём накопления нескольких октав с возрастающими частотами и уменьшающимися амплитудами. Чем больше октав, тем естественнее выглядит шум. Однако увеличение числа октав также требует большего количества вычислений, что отрицательно сказывается на производительности.

Этот атрибут можно использовать со следующими элементами SVG:

<feTurbulence>

Пример

Пример 1

<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>

Пример 2

<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>

Примечания по использованию

Значение	`<integer>`
Значение по умолчанию	`1`
Анимируемый	Да

<integer>: Задаёт количество октав. Отрицательные значения запрещены.

Спецификации

Спецификация
Модуль эффектов фильтров уровня 1> # element-attrdef-feturbulence-numoctaves>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`numOctaves`	5	79	3	15	6	18	4	14	6	1.0	4.4	6

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves