<feDisplacementMap>

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

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

Фильтрующий примитив <feDisplacementMap> SVG использует значения пикселей изображения из in2, чтобы пространственно сместить изображение из in.

Формула преобразования выглядит так:

P'(x,y) ← P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

где P(x,y) — входное изображение, in, а P'(x,y) — изображение назначения. XC(x,y) и YC(x,y) — значения компонентов канала, заданного атрибутами xChannelSelector и yChannelSelector.

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

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

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

Атрибуты

Интерфейс DOM

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

Пример

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

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera для Android	Safari в iOS	Samsung Internet	WebView Android	WebView в iOS
`feDisplacementMap`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`in`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`in2`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`scale`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`xChannelSelector`	5	79	3	15	6	18	4	14	6	1.0	4.4	6
`yChannelSelector`	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/feDisplacementMap