FirefoxのSVGフィルター
-
27-09-2019 - |
質問
何らかの理由で、SVGフィルターをFirefoxで動作させることはできません。ただし、オペラではうまく機能します。私がフィルターに設定したプロパティの要素は、ただ消えます。とても奇妙です。
これが私の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);
}
何かご意見は?ありがとう
解決
ポールアイルランド デモを適用しました SVGフィルターHTML 5ビデオ.
のソースコード ライブデモ フィルターを切り替える方法を示します。その場合、すべてのSVGピースは、JavaScriptを介して動的に挿入されていないタグとしてページに直接記述されます。
ストレートアップタグを使用して機能させて、機能したらJavaScriptに切り替えるのに役立つかもしれません。動的に作成されたときにのみそれ自体を表現する実装(バグ)の奇妙な奇妙さがあるかもしれません(/推測)。
また、使用しているFirefoxのバージョンがどのバージョンであるかによって異なります。どのバージョンがSVGフィルターのサポートを開始したかはわかりませんが、ポールの投稿は夜間のビルドが必要になる可能性があることを示唆しているようです。
幸運を!
他のヒント
その色のマトリックスは、あらゆる色のすべてのコンポーネントを完全にオンにするために、要素を完全に白くするように私には見えます。
(また、他の人がJavaScriptスニペットではなく問題を示す完全な例のURLを投稿したかどうかを把握するのが簡単かもしれません。
これはに関連している可能性があります Firefoxバグ#308590. 。要するに、Firefoxは、SVGがdata-urlからロードされるか、u003Cbase> - ドキュメントのタグ。
例では、Firefoxは埋め込まれたドキュメントの外にあるURL(#cm-mat)を探します。残念ながら、それは最近修正されましたが、私の場合、私は回避策を見つけませんでしたが、何らかの形でベースタグを省略しました。
ページはXMLとして提供する必要があります。