<feTurbulence>

Базовый уровень Широко доступно

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

Примитив фильтра <feTurbulence> SVG создаёт изображение с помощью функции турбулентности Перлина. Он позволяет создавать искусственные текстуры, например облака или мрамор. Полученное изображение заполнит всю подобласть примитива фильтра.

Как и другие примитивы фильтров, по умолчанию он обрабатывает цветовые компоненты в linearRGB цветовом пространстве. Чтобы вместо него использовать sRGB, можно задать color-interpolation-filters.

Контекст использования

Категории	Элемент — примитив фильтра
Допустимое содержимое	Любое количество следующих элементов в произвольном порядке: `<animate>`, `<discard>`, `<set>`

Атрибуты

Интерфейс DOM

Этот элемент реализует интерфейс SVGFETurbulenceElement.

Пример

<svg
  width="200"
  height="200"
  viewBox="0 0 220 220"
  xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      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>

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

Спецификация
Модуль эффектов фильтров, уровень 1> # feTurbulenceElement>

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`feTurbulence`	5	12 Частичная поддержка, см. ошибку 12382004.	3	9	6	18	4	14	6	1.0	4.4	6
`baseFrequency`	5	12 Частичная поддержка, см. ошибку 12382004.	3	9	6	18	4	14	6	1.0	4.4	6
`numOctaves`	5	79	3	15	6	18	4	14	6	1.0	4.4	6
`seed`	5	12 Частичная поддержка, см. ошибку 12382004.	3	9	6	18	4	14	6	1.0	4.4	6
`stitchTiles`	5	79	3	15	6	18	4	14	6	1.0	4.4	6
`type`	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/Element/feTurbulence