html - 在 HTML 文档中嵌入 SVG 过滤器

Question

有没有办法在 HTML 文档中嵌入 SVG filter 元素，以便在某个时候将其应用于 SVG 和 HTML 元素(通过 CSS)？将其放入本身嵌入 HTML 文档中的 svg 元素中的问题是 svg 元素本身占用空间，这是不希望的。

Answer 1

你可以这样尝试:

• 将 svg 包裹在 div
• 对于 div，指定 css 属性position:absolute;，这将 从通用流中输出，不会干扰 标记
• 隐藏div

• 在 CSS 中，按其 id 将过滤器应用于任何其他 HTML“标记对象”

  过滤器:url(#nameID);

更新:

我必须提到使用 display: none; 的一些细微差别

在这里question详细讨论了在各种浏览器中应用SVG过滤器的问题。

@Paul LeBeau 在其 answer 中建议使用 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;}