CSS3过滤器在localhost上工作但不在远程主机上工作

Question

我目前正面临一个我不知道如何解决的问题。将CSS3灰度滤镜应用于某些图像时，它可以在我的本地主机上运行，​​但在实时网站上，图像显示为白色（即不可见）。

相关CSS：

.preview .preview-thumb {
  width: 200px;
  height: 150px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale);
  filter: gray;
}

.preview:hover .preview-thumb {
  -webkit-box-shadow: 0 0 3px 3px gray;
  -moz-box-shadow: 0 0 3px 3px gray;
  box-shadow: 0 0 3px 3px gray;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none; 
}

相关HTML：

<div class="preview-container" data-category-id="3">
  <div class="preview">
    <a href="project.php?id=3">
      <img class="preview-thumb" src="projects/architectuur/Masterproject Wilsele/grote maquette.jpg"/>
    </a>
    <span class="preview-name">Masterproject Wilsele</span>
  </div>
</div>

相关目录结构：

/
  css
    grayscale.svg
    style.css
  page.html

在localhost上更正输出： 远程主机（实时站点）上的输出不正确：

这两个截图都是使用相同的浏览器（Ubuntu 14.04上的Firefox 33.0）制作的。在Ubuntu 14.04上使用Chrome（版本38.0.2125.104（64位））时一切正常，所以我的猜测是问题源于url(grayscale.svg#greyscale) hack。

关于如何解决这个问题的任何想法？我正在使用的SVG文件是从this site下载的。

Answer 1

每当人们有一个“从本地主机工作而不是从远程服务器工作”的SVG文件问题时，几乎总是证明你的网络服务器没有为你的SVG文件返回正确的MIME类型。

确保Web服务器返回的内容类型为“image / svg + xml”的grayscale.svg文件。最简单的检查方法是使用浏览器开发工具中的“网络”选项卡。

<强>更新

在查看您的实际网站后，我在控制台中发现了此警告：

Content Security Policy: The page's settings blocked the loading of a resource at
          http://corporaal.be/css/grayscale.svg ("default-src 'none'").

您需要修改内容安全策略标头以允许加载SVG。尝试将default-src更改为“self”。