时间戳

首页 > 解决方案 > 在 HTML 文档中嵌入 SVG 过滤器

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

问题描述

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

标签： htmlsvg

解决方案

你可以这样尝试：

  • 包裹svg在div
  • 对于div，分配 css 属性，该属性position: absolute;将从一般流中输出并且不会干扰标记
  • 隐藏div

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

    filter:url(#nameID);

更新：

我不得不提一些使用display: none;

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

@Paul LeBeau 在其回答中建议使用 SVGwidth = "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;}

推荐阅读