numOctaves

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

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

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

<feTurbulence>

Пример

Пример 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" style="filter: url(#noise1);" />
  <rect
    x="0"
    y="0"
    width="200"
    height="200"
    style="filter: url(#noise2); transform: translateX(220px);" />
</svg>

Пример 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" style="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
`numOctaves`	5	79	3	15	6	18	4	14	6	1.0	4.4

См. также

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