По некоторым причинам я не могу заставить свои фильтры SVG работать в Firefox. Они хорошо работают в Opera, как бы то ни было. Элемент, на свойстве которого я установил на фильтр просто, исчезает. Это очень нечетно.
Вот мой код 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, но сообщение Пола, похоже, предполагает, что для этого может потребоваться ночная сборка.
Удачи!
Мне кажется, что эта цветовая матрица должна полностью включить каждый компонент каждого цвета, сделав элемент полностью белым.
(Другим людям также может быть проще выяснить, если вы разместили URL-адрес полного примера, показывающего проблему, а не просто фрагмента кода javascript; это позволило бы другим людям проверить теории относительно того, почему что-то идет не так.)