Question

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

当SVG过滤器defs内联但在外部文件中不起作用时，它可以正常工作。我不希望SVG内联避免使用膨胀的html文件。

根据这个link，如果svg来自与html“相同的起源”，它应该有用。我不清楚“相同的起源”是什么意思。

我的目录结构是：的index.html \ CSS

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

将svg文件放在root上，索引为
以及css目录
使用路径网址（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);   }

任何帮助将不胜感激

Answer 1

添加类似于普通图像

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

在哪里放置外部svg文件以供CSS引用？

1 个答案: