SVG Фильтры в Firefox - PullRequest
Новая
       24

SVG Фильтры в Firefox

5 голосов
/ 17 мая 2010

Почему-то я не могу заставить свои 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);
}

Есть мысли? Спасибо

Ответы [ 4 ]

3 голосов
/ 18 мая 2010

Пол Айриш сделал демонстрацию с применением SVG Filters к HTML 5 видео .

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

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

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

Удачи!

1 голос
/ 14 июня 2011

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

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

1 голос
/ 18 мая 2010

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

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

0 голосов
/ 12 сентября 2010

Ваша страница должна быть представлена ​​в формате XML.

...