Встраивание фильтра SVG в документ HTML

Question

Есть ли способ встроить элемент SVG filter в документ HTML, чтобы в какой-то момент его можно было применить к элементам SVG и HTML (через CSS)?Проблема с размещением его внутри элемента svg, который сам встроен в документ HTML, состоит в том, что сам элемент svg занимает место, что нежелательно.

Answer 1

Вы можете попробовать это так:

• Оберните svg в div
• Для div присвойте свойство css position: absolute;, которое будет выводитьон из общего потока и не будет мешать разметке
• скрыть div

• В CSS, применить фильтр по id к любому другому HTML `объект разметки

  filter:url(#nameID);

Обновление:

Я должен упомянуть некоторые нюансы использования display: none;

Здесь в этом вопросе подробно обсуждаются проблемы применения фильтров SVG в различных браузерах.

@ Поль ЛеБо в своем ответе рекомендует использовать SVG width = "0" и height = "0" вместо display: none;

Ниже приведен код из его ответа.

<video autoplay controls muted src=" https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" style="width: 488px; height: 360px; filter: url(#temperature_filter)">
</video>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="temperature_filter" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.694 0 0 0 0 0 0.431 0 0 0 0 0 1 0"></feColorMatrix>
  </filter>
</svg>

Как написано в комментариях @enxaneta лучше использовать:

svg{position: absolute; width: 0; height: 0;}