将图像转换为灰度（SVG）问题

Question

尝试将图像转换为灰度并在悬停时恢复正常 - 参考在HTML / CSS中将图像转换为灰度

在IE中，通过普通筛选器使用一切运作良好，但Firefox中的SVG方法不太顺利。我的页面都位于站点根目录中，然后样式表在/SiteStyles/Styles.css中，我在其中调用.homeCaseStudyImage img {filter:url(filters.svg#grayscale);

我的filters.svg也在/SiteStyles目录中。它看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>

我知道这对别人起作用，所以我猜这可能与我的文件夹结构有关，或者可能没有引用SVG相关内容？如果可以帮忙，将不胜感激。

- Matt

---

请参考 https://dev59.com/KF_Va4cB1Zd3GeqPSFCU#8896020 获取另一种解决方案。 - Erik Dahlström

Answer 1

请确保您的服务器配置为使用SVG MIME类型image/svg+xml来提供.svg文件。如果没有正确的MIME类型，火狐浏览器将忽略SVG文件。

- Cheran Shunmugavel

---

谢谢，我目前正在使用VS内置的开发服务器，但一旦进入预览阶段，我会在IIS中进行测试。 - Matt