CSS 在 Firefox 中将过滤器 (svg) 应用于 DIV

Question

想法来自：http://tympanus.net/Development/CreativeGooeyEffects/

离线时一切正常。但是当我放在我的服务器上，或者与 Wamp 一起工作时。我的 DIV 元素在 Firefox 上完全消失了 ??

代码HTMLindex.html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800">
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -15" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
      </defs>
    </svg>

代码CSS

.share {
position: relative;
  max-width: 600px;
  height: 100px;
  margin: 0 auto;
 -webkit-filter: url("#goo");
  filter: url('http://www.martmars.com/index.html#goo');
  position: relative;
}

我不明白为什么？（我尝试使用 url，例如“http://www...”，并使用 chrome，但不能使用 firefox 在线）

Answer 1

所以，

我尝试了很多次后找到了一些东西。如果做：

.share {
  max-width: 600px;
  height: 100px;
  margin: 0 auto;
 -webkit-filter: url("#goo");
  filter: url('../toto.html#goo');
  position: relative;
}

它在任何浏览器中都运行良好。但如果在 Index.html 中则不起作用。我不知道为什么。但它在任何地方都很好用:

.share {
  max-width: 600px;
  height: 100px;
  margin: 0 auto;
 -webkit-filter: url("#goo");
  filter: url('../#goo');
  position: relative;
}

瞧:)

CSS 在 Firefox 中将过滤器 (svg) 应用于 DIV

CSS Apply filters (svg) to DIV in firefox

css

firefox

svg

filter