Question

是否可以将SVG filter元素嵌入HTML文档中，以便可以将其应用于CSS上的SVG和HTML元素？将其放在本身嵌入HTML文档中的svg元素中的问题是svg元素本身占用了空间，这是不希望的。

Answer 1

您可以这样尝试：

在svg中包裹div
对于div，分配css属性position: absolute;，它将从一般流输出它，并且不会干扰标记
隐藏div
在CSS中，通过过滤器id将过滤器应用于任何其他HTML`标记对象

filter: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;}

将SVG过滤器嵌入HTML文档中

1 个答案: