Фильтры SVG в Firefox

По какой-то причине я не могу заставить фильтры 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);
}

Есть предположения? Спасибо


javascript svg dom firefox svg-filters
person Nick    schedule 17.05.2010    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Пол Айриш сделал демонстрацию, применив SVG фильтрует видео HTML 5.

В исходном коде демонстрации показано, как переключаться между фильтрами. В этом случае все фрагменты SVG записываются непосредственно на страницу в виде тегов, а не вставляются динамически через JavaScript.

Это может помочь попробовать заставить его работать, используя прямые теги, а затем переключиться на JavaScript, как только он заработает. Может быть какая-то странная странность реализации (ошибка), которая проявляется только при динамическом создании (/спекуляция).

Кроме того, это может зависеть от того, какую версию Firefox вы используете. Я не уверен, какая версия начала поддерживать фильтры SVG, но сообщение Пола, кажется, предполагает, что может потребоваться ночная сборка.

Удачи!

person jimbo    schedule 17.05.2010

arrow_upward
1
arrow_downward

Мне кажется, что эта цветовая матрица должна полностью включать каждый компонент каждого цвета, делая элемент полностью белым.

(Другим людям также может быть легче понять, если вы разместите URL-адрес полного примера, показывающего проблему, а не просто фрагмент javascript; это позволит другим людям проверить теории относительно того, почему это происходит не так.)

person David Baron    schedule 17.05.2010
comment
Да, результат должен быть полностью белым, если применить фильтр. Мне было бы интересно узнать больше о том, что Opera делает в вашем исходном примере (я думаю, это элементы в неправильном пространстве имен, поскольку вы используете createElement вместо createElementNS). Эквивалент приведенного выше фрагмента без сценария показывает, что Opera и Firefox ведут себя одинаково (белый вывод). - person Erik Dahlström; 18.05.2010
comment
Да, извините, я возился со значениями и забыл их сбросить. Я пробовал несколько совершенно разных значений без каких-либо изменений. Я просто отказался от динамического добавления элементов svg с помощью javascript и добавил их вручную. Теперь работает, спасибо. - person Nick; 18.05.2010

arrow_upward
1
arrow_downward

Это может быть связано с ошибкой Firefox № 308590. Короче говоря, Firefox не может разрешить URL-адреса фильтров, когда ваш SVG загружается с URL-адреса данных или в вашем документе есть тег ‹base›.

В вашем примере Firefox ищет URL-адрес (#cm-mat) где-то за пределами вашего встроенного документа. К сожалению, это было исправлено только недавно, и в моем случае я не нашел обходного пути, кроме как опустить базовый тег.

person Marcel Anacker    schedule 14.06.2011
comment
Спасибо, ваш комментарий избавил меня от некоторых проблем. Моя цветовая матрица SVG была указана как URL-адрес данных в моем CSS, и это работало в Firefox 11, но тогда мой клиент не мог ее увидеть, используя Firefox 4.0.1 (!!!). Вместо изображений он мог видеть только белое. Я попытался удалить свой тег ‹base›, и это ничего не дало. Перемещение кода во внешний svg решило проблему. Я протестировал Firefox 4.0.1, чтобы убедиться, что он работает, а также предупредил клиента, что ему нужно обновиться, чтобы быть в безопасности в Интернете. :) - person alexg; 21.09.2012

arrow_upward
0
arrow_downward

ваша страница должна обслуживаться как xml.

person Henry    schedule 12.09.2010