CSS 引用的外部 svg 文件放在哪里？答案

【问题标题】：Where to place external svg file to be referenced by CSS?CSS 引用的外部 svg 文件放在哪里？
【发布时间】：2014-02-10 08:40:45
【问题描述】：

我正在尝试从 CSS 中引用 SVG 过滤器。两者都是外部的。

当 SVG 过滤器定义为内联时它可以正常工作，但在外部文件中时不起作用。我不希望 SVG 内联避免 html 文件臃肿。

根据link，如果 svg 来自与 html 的“相同来源”，它应该可以工作。我不清楚“同源”是什么意思。

我的目录结构是：索引.html \css

我尝试了所有这些都没有成功：

将 svg 文件放在带有索引的根目录中
以及在 css 目录中
使用路径url(css/test.svg#LightItUp);
像这样将 css 内联：#LightItUp {filter:url(css/test.svg#LightItUp);}

svg 内容：

<svg width="500" height="262" viewBox="0 0 200 150"  >
<defs> 
  <filter id="LightItUp" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="420">

  <!-- Apply a uniform blur of the 
       alpha channel -->
  <feGaussianBlur in="SourceAlpha" 
     stdDeviation="3" result="blur"/>
  </filter>
</defs>
</svg>

css内容：

.logo  { filter: url(test.svg#LightItUp);   }

任何帮助将不胜感激

【问题讨论】：

我的直觉是片段标识符（#LightItUp）在某些浏览器的css背景中不再支持，也许它在过滤器中也不起作用。

标签： html css svg

【解决方案1】：

添加它类似于普通图像

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

【讨论】：

感谢您的建议，但过滤器仍然没有应用