當它是背景時填充SVG顏色

Question

我試圖將svg作爲背景，然後使用不起作用的顏色填充它。

#header-container { background-color:transparent; background-image: url(http://somewebsite.com/images/wallp.svg); fill: red; } 

這似乎不工作... 任何建議？

Answer 1

工作實例http://jsfiddle.net/InferOn/p5Az4/3/

HTML

<svg id="header-container" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" i:viewOrigin="226.9077 360.5469" i:rulerOrigin="0.5 -0.5" i:pageBounds="-0.5 612.5 791.5 0.5" width="303.044" height="72.375" viewBox="0 0 303.044 72.375" overflow="visible" enable-background="new 0 0 303.044 72.375" xml:space="preserve"> 
    <!-- too markup to past here --> 
</svg> 

CSS

#header-container {fill: red;} 

圖片結果沒有自己的風格

你的榜樣，我很抱歉，不能工作，因爲fill property

設置或獲取值，指示顏色漆給定的圖形元素的 內部。

您可以將其應用到圖形和文本內容元素，在雅閣SPEC

凡shape是：

由直 行的某些組合定義的圖形元素和曲線。具體來說：'路徑'，'矩形'，'圓'，'橢圓'，'線'，'折線'和'多邊形' 。

和text content element是：

文本內容元素是導致文本字符串 被渲染到畫布上的SVG元素。在SVG 1.1文本內容元素是繼 ： 'altGlyph'， 'textPath'， '文字'， 'TREF' 和 'TSPAN'

所以

中的 '填寫' 財產描繪的給定圖形的內部元素。要繪製的區域由形狀輪廓內的任何區域組成。爲了確定形狀的內部，考慮所有 子路徑，並且根據 確定內部與'填充規則' 屬性的當前值相關聯的規則。一個形狀的零寬度幾何輪廓​​包含在要繪製的區域 中。

的填充操作可如同一個額外的「closepath」命令加入到 路徑子路徑的最後一個點與 子路徑的第一個點連接進行填充 操作填充打開的子路徑。因此，填充操作適用於 '路徑'元素（即，沒有關閉路徑命令的子路徑）和 '折線'元素內的開放子路徑。