in

Атрибут in определяет входные данные для данного фильтрующего примитива.

Значением может быть одно из шести ключевых слов, определённых ниже, либо строка, совпадающая со значением атрибута result, указанным ранее в том же элементе <filter>. Если значение не задано и это первый фильтрующий примитив, он будет использовать в качестве входных данных SourceGraphic. Если значение не задано и это последующий фильтрующий примитив, он будет использовать в качестве входных данных результат предыдущего фильтрующего примитива.

Если значение result встречается несколько раз в одном элементе <filter>, ссылка на этот результат будет использовать ближайший предшествующий фильтрующий примитив, для которого задано такое же значение атрибута result.

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

• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feDropShadow>
• <feGaussianBlur>
• <feMergeNode>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>

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

SourceGraphic

Это ключевое слово обозначает графические элементы, которые были исходными входными данными элемента <filter>.

SourceAlpha

Это ключевое слово обозначает графические элементы, которые были исходными входными данными элемента <filter>. SourceAlpha подчиняется тем же правилам, что и SourceGraphic, за исключением того, что используется только альфа-канал.

BackgroundImage

Это ключевое слово обозначает снимок изображения документа SVG в области фильтра на момент вызова элемента <filter>.

BackgroundAlpha

То же, что и BackgroundImage, но используется только альфа-канал.

FillPaint

Это ключевое слово обозначает значение свойства fill целевого элемента, к которому применяется эффект фильтра. Во многих случаях FillPaint непрозрачен повсюду, но это может быть не так, если фигура закрашена градиентом или узором, содержащим прозрачные или полупрозрачные участки.

StrokePaint

Это ключевое слово обозначает значение свойства stroke целевого элемента, к которому применяется эффект фильтра. Во многих случаях StrokePaint непрозрачен повсюду, но это может быть не так, если фигура закрашена градиентом или узором, содержащим прозрачные или полупрозрачные участки.

<filter-primitive-reference>

Это значение — заданное имя фильтрующего примитива в формате <custom-ident>. Если оно указано, графические данные, полученные в результате обработки этого фильтрующего примитива, можно использовать в качестве входных данных последующего фильтрующего примитива в том же элементе filter, указав атрибут in. Если значение не задано, выходные данные будут доступны для повторного использования только как неявные входные данные следующего фильтрующего примитива, если для его атрибута in не указано значение.

Обходное решение для BackgroundImage

BackgroundImage не поддерживается в современных браузерах в качестве источника фильтра (см. таблицу совместимости feComposite). Поэтому нужно импортировать одно из изображений для наложения непосредственно в фильтр с помощью элемента <feImage>.

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="backgroundMultiply">
      <!-- This will not work. -->
      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
    </filter>
  </defs>
  <image
    href="mdn_logo_only_color.png"
    x="10%"
    y="10%"
    width="80%"
    height="80%" />
  <circle
    cx="50%"
    cy="40%"
    r="40%"
    fill="#cc0000"
    filter="url(#backgroundMultiply)" />
</svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageMultiply">
      <!-- This is a workaround. -->
      <feImage
        href="mdn_logo_only_color.png"
        x="10%"
        y="10%"
        width="80%"
        height="80%" />
      <feBlend in2="SourceGraphic" mode="multiply" />
    </filter>
  </defs>
  <circle
    cx="50%"
    cy="40%"
    r="40%"
    fill="#cc0000"
    filter="url(#imageMultiply)" />
</svg>

Результат

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