<feDisplacementMap>

Примитив фильтра <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.

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

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

Атрибуты

Интерфейс DOM

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

Пример

html

<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" style="filter: url(#displacementFilter)" />
</svg>

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

Спецификация
Модуль фильтров Level 1 # feDisplacementMapElement

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

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