in

Атрибут in идентифицирует входной параметр для заданного примитива фильтра.

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

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

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

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

Значение	`SourceGraphic` \| `SourceAlpha` \| `BackgroundImage` \| `BackgroundAlpha` \| `FillPaint` \| `StrokePaint` \| `<filter-primitive-reference>`
Значение по умолчанию	`SourceGraphic` для первого примитива фильтра, в противном случае результат предыдущего примитива фильтра
Анимируемо	Да

SourceGraphic: Это ключевое слово представляет графические элементы, которые были исходным входом в элемент <filter>.
SourceAlpha: Это ключевое слово представляет графические элементы, которые были исходным входом в элемент <filter>. SourceAlpha имеет все те же правила, что и SourceGraphic за исключением того, что используется только альфа-канал.
BackgroundImage: Это ключевое слово представляет собой моментальный снимок изображения документа SVG под областью фильтра в момент вызова элемента <filter>.
BackgroundAlpha: То же, что и BackgroundImage, за исключением того, что используется только альфа-канал.
FillPaint: Это ключевое слово представляет значение свойства fill на целевом элементе для эффекта фильтра. Во многих случаях FillPaint является непрозрачным повсюду, но это может не быть так, если фигура окрашена градиентом или узором, которые сами по себе включают прозрачные или полупрозрачные части.
StrokePaint: Это ключевое слово представляет значение свойства stroke на целевом элементе для эффекта фильтра. Во многих случаях StrokePaint является непрозрачным повсюду, но это может не быть так, если фигура окрашена градиентом или узором, которые сами по себе включают прозрачные или полупрозрачные части.
<filter-primitive-reference>: Это присвоенное имя примитиву фильтра в форме <custom-ident>. Если указано, то графику, полученную в результате обработки этого примитива фильтра, можно ссылаться с помощью атрибута in в последующем примитиве фильтра в том же элементе фильтра. Если значение не указано, то результат будет доступен только для повторного использования в качестве неявного входного параметра следующего примитива фильтра, если этот примитив фильтра не предоставляет значение для атрибута in.

Обход BackgroundImage

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

Примечание: Ошибка Firefox Bug 455986 означает, что feImage не может загрузить частичные изображения, включая окружности, прямоугольники, пути или другие фрагменты, определённые в документе. Чтобы этот пример работал в большем количестве браузеров, загружается полное внешнее изображение логотипа.

HTML

html

<div style="width: 420px; height: 220px;">
  <svg
    style="width:200px; height:200px; display: inline;"
    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="#c00"
      style="filter:url(#backgroundMultiply);" />
  </svg>

  <svg
    style="width:200px; height:200px; display: inline;"
    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="#c00"
      style="filter:url(#imageMultiply);" />
  </svg>
</div>

Результат

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

Спецификация
Filter Effects Module Level 1 # element-attrdef-filter-primitive-in

© 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/in