在哪裏放置外部svg文件被CSS引用？

我試圖從CSS引用SVG過濾器。兩者都是外部的。在哪裏放置外部svg文件被CSS引用？

它工作正常時，SVG過濾器defs內聯，但在外部文件時不起作用。我不希望SVG內聯以避免臃腫的html文件。

根據這link，它應該工作，如果svg來自「相同的來源」作爲html。我不清楚「同源」是什麼意思。

我的目錄結構是：的index.html \ CSS

我嘗試了所有這些都沒有成功：

把SVG文件的根目錄與索引
以及在CSS目錄
使用路徑url（css/test.svg＃LightItUp）;
把CSS內聯，如下所示：{#LightItUp濾波器：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); }

任何幫助將不勝感激

來源

2014-01-20 Mindgnosis

我的預感是問題是片段標識符（#LightItUp）在某些瀏覽器中不再受css背景支持，也許它在濾鏡中也不起作用。 –

-1

類似於將它添加到一個正常的圖像

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

來源

2014-01-28 11:13:50 Magnum26

感謝您的建議，但過濾器仍然不適用 – Mindgnosis

在哪裏放置外部svg文件被CSS引用？

回答

相關問題