SVG「填充：網址（＃....）」在Firefox

舉止異常

<svg width='36' height='30'> 
    <defs> 
    <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/> 
     <stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/> 
    </linearGradient> 
    <linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/> 
     <stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/> 
    </linearGradient> 
    <linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/> 
     <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/> 
    </linearGradient> 
    </defs> 

    <text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text> 
</svg>'

我通過各個之間的CSS和開關設定的text元件的fill屬性梯度取決於懸停狀態。這在Chrome & Safari中效果很好，但在Firefox中，文本不顯示。檢查元素後，我發現Firefox在我的fill: url(#...) CSS屬性的末尾附加了none。我嘗試使用Firebug刪除none關鍵字，但Firebug只是刪除了整個屬性。這是爲什麼發生？

編輯： 我要指出的是，如果我刪除設置fill屬性CSS和硬編碼fill屬性爲text元件（未通過在線style屬性），文本正確顯示在所有瀏覽器。

來源

2013-02-27 Nathan Friend

你的真實CSS是什麼樣的，去那個SVG？至於「沒有」的事情，「fill：url（whatever）none」與「fill：url（whatever）」是一樣的;都說，如果網址上的東西不可用，那就沒有後備，也不應該畫任何東西。 – 2013-02-28 06:35:40

@BorisZbarsky謝謝，我沒有意識到'沒有'指定沒有找到第一個資源時會發生什麼。 – 2013-02-28 14:45:21

想通了。在我的CSS，我指的是梯度以同樣的方式我本來引用填充在線：

#myselector { 
    fill: url('#gradient-id'); 
}

爲了得到它在Firefox的工作，我不得不把它改成這樣：

#myselector { 
    fill: url('/#gradient-id'); 
}

不知道這是爲什麼。也許它與包含我的樣式表的目錄結構有關？

來源

2013-02-28 14:48:24

樣式表中的相對'url（）'相對於樣式表被解析。所以如果你的樣式表和SVG在不同的目錄中，你可能根本沒有鏈接到SVG。 – 2013-02-28 17:00:43

Webkit並沒有這樣做，我很肯定Boris在前一段時間向他們的bugtracker報告。 – 2013-02-28 18:32:01

嗨鮑里斯，我也有這個問題，我見過你經常在Firefox的錯誤報告評論，你能解釋爲什麼填充：網址（「＃gradient-id」）沒有找到該漸變ID在在css中指定的dom，但內聯？我不在我的頁面外加載svgs ... Chrome的這個實現是否不正確？這似乎應該是預期的行爲。 – Daniel 2013-04-05 17:55:28

SVG「填充：網址（＃...）」在Firefox中行爲怪異，當我們分配下面的代碼與CSS

#myselector { 
fill: url('#gradient-id'); 
}

解決方案

給內聯（外部和內部的CSS）。造型，這可以通過兩種方式完成。靜態或動態的方式

動態方式

.attr('fill', 'url(#gradient-id)')

靜態的方式

fill="url(#gradient-id)"

在靜態的，你必須把這個在SVG的Html;

來源

2014-03-28 16:13:16

謝謝。另一個被接受的答案似乎只在從根URL查看svg時才能修復（反之亦然）。 – Chase 2017-01-10 18:19:23

也風格屬性的作品，其中CSS類沒有。例如 .. – luky 2017-02-22 09:51:46

-1

我與SVG中的linearGradient有相同的問題 - 仍然在2017年。我猜測，問題在於Firefox像url('#gradient-id')一樣使用普通URL和應用規則<base href=""/> metatag。評論一下，然後檢查。

來源

2017-04-20 08:44:45 lukdur

問題中沒有基本標記。這個問題是關於解析CSS樣式表中的url。它是根據樣式表本身（如CSS規範所述）還是使用該樣式表的文檔（如Chrome所做的）來解決的。 – 2017-04-20 08:50:34

當然，這不是 - 我只是認爲這可能是它無法正常工作的原因。這是我的理由。它不是關於stylesheet，而是放置** id **標籤（這裏是** gradient-id **）。由於某些原因使用相對路徑**＃gradient-id ** with ** base ** metatag打破了某些內容，並且FF無法在任何地方找到** gradient-id **標記。在我的情況下，它不工作在HTML（在SVG圈）和CSS或JS與相對路徑。這是工作時，我刪除**基地**標記或設置絕對路徑在js像**。attr（'stroke'，「url（」+ window.location.href +「＃gradient-id）」** – lukdur 2017-04-20 09:22:17

元標記也影響到Safari @lukdur。那麼，你對這個問題的解決方法是什麼？設置絕對路徑？ – 2017-05-31 06:23:52

SVG「填充：網址（＃....）」在Firefox

回答

相關問題