Firefox中的SVG過濾器

由於某些原因，我無法讓我的SVG過濾器在Firefox中工作。但是，他們在Opera中運行良好。我設置爲過濾器的屬性就消失了。這很奇怪。Firefox中的SVG過濾器

這裏是我的javascript代碼：

defsElement = SVGDoc.createElement("defs"); 
var filterElement = SVGDoc.createElement("filter"); 
filterElement.setAttribute("id", "cm-mat"); 
filterElement.setAttribute("filterUnits", "objectBoundingBox"); 

var fecolormatrixElement = SVGDoc.createElement("feColorMatrix"); 
fecolormatrixElement.setAttribute("type", "matrix"); 
fecolormatrixElement.setAttribute("in", "SourceGraphic"); 
fecolormatrixElement.setAttributeNS(null, "values", "1 1 1 1 1 2 2 2 2 1 1 1 1 1 1 1 1 1 1 1"); 
filterElement.appendChild(fecolormatrixElement); 
defsElement.appendChild(filterElement); 
SVGDoc.documentElement.insertBefore(defsElement, SVGDoc.documentElement.childNodes.item(1)); 

partRef = getElementFromID(SVGDoc.documentElement, part); 
if(partRef != null) 
{ 
    partRef.style.setProperty('filter', 'url(#cm-mat)', null); 
}

有什麼想法？謝謝

來源

2010-05-17 Nick

Paul Irish作出演示申請SVG Filters to HTML 5 video。

the live demo的源代碼顯示瞭如何在濾鏡之間切換。在這種情況下，所有SVG片段都會作爲標籤直接寫入頁面，而不是通過JavaScript動態插入。

它可能有助於嘗試使用直線標記工作，然後在其工作後切換到JavaScript。動態創建（/推測）時，可能會有一些奇怪的實現（bug），它們只表達自己。

此外，它可能不取決於您使用的Firefox的版本。我不確定哪個版本開始支持SVG過濾器，但Paul的帖子似乎暗示它可能需要每晚構建。

祝你好運！

來源

2010-05-17 21:19:57 jimbojw

該顏色矩陣在我看來應該將每種顏色的每個組成部分完全打開，使元素完全變白。

（其他人也可能更容易弄清楚你是否發佈了一個顯示問題的完整示例的URL而不僅僅是一個javascript代碼片段;這可以讓其他人測試理論爲什麼會出錯。）

來源

2010-05-17 21:45:49

是的，如果應用過濾器，結果應該是全白的。我很想知道更多關於Opera在原始示例中做了什麼（我的猜測是錯誤名稱空間中的元素，因爲您使用createElement而不是createElementNS）。上面代碼片段的非腳本化等價物顯示了Opera和Firefox的行爲相同（白色輸出）。 – 2010-05-18 06:36:51

對不起，我正在旋轉數值並忘記重置它們。我嘗試了一些截然不同的值，但沒有任何變化。我只是放棄了動態添加JavaScript的svg元素，並手動添加它們。它現在有效，謝謝。 – Nick 2010-05-18 15:33:07

您的頁面需要作爲xml服務。

來源

2010-09-12 11:20:11 Henry

這可能與Firefox Bug #308590有關。簡而言之，當你從一個數據URL加載SVG時，或者你的文檔中有一個<基地> -Tag，Firefox無法解析過濾器URL。

在您的示例中，Firefox在嵌入式文檔之外的某處查找url（＃cm-mat）。不幸的是，它最近纔得到修復，在我的情況下，我沒有找到解決方法，但忽略了base-Tag。

來源

2011-06-14 15:19:33

謝謝，您的評論讓我免於麻煩。我在我的CSS中將我的SVG顏色矩陣thingy指定爲數據網址，並在Firefox 11中工作，但後來我的客戶端無法使用Firefox 4.0.1（!!!）查看它。他只能看到白色而不是圖像。我試圖刪除我的標籤，它什麼也沒做。將代碼移至外部svg可解決問題。我使用Firefox 4.0.1進行了測試，以確保它可以正常工作，並警告客戶他需要升級到安全的在線狀態。 :) – alexg 2012-09-21 11:53:35

Firefox中的SVG過濾器

回答

相關問題