Filtros SVG no Firefox

Question

Por alguma razão, não consigo fazer com que meus filtros SVG trabalhem no Firefox. Eles funcionam bem na ópera, no entanto. O elemento cuja propriedade eu defino para o filtro desaparece. É muito estranho.

Aqui está meu código 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);
}

Alguma ideia? Obrigado

Answer 1

Paul irlandês fez uma demonstração aplicando Filtros SVG para HTML 5 Vídeo.

O código -fonte para a demonstração ao vivo mostra como alternar entre filtros. Nesse caso, todas as peças SVG são escritas diretamente na página como tags, não inseridas dinamicamente via JavaScript.

Pode ajudar a tentar fazê -lo funcionar usando tags diretas e depois mudar para o JavaScript assim que estiver funcionando. Pode haver alguma estranha estranheza da implementação (Bug) que apenas se expressa quando criada dinamicamente (/especulação).

Além disso, pode depender de qual versão do Firefox você está usando. Não tenho certeza de qual versão começou a suportar filtros SVG, mas o post de Paul parece sugerir que pode exigir uma construção noturna.

Boa sorte!

Answer 2

Essa matriz de cores me parece que deveria girar todos os componentes de todas as cores para totalmente, tornando o elemento completamente branco.

(Também pode ser mais fácil para outras pessoas descobrirem se você postou o URL de um exemplo completo mostrando o problema, em vez de apenas um trecho de JavaScript; isso permitiria que outras pessoas testassem as teorias sobre o motivo de estar errado.)

Answer 3

Isso pode estar relacionado a Bug Firefox #308590. Em breve, o Firefox não resolve os URLs de filtro quando seu SVG é carregado de um Data-URL ou você tem umu003Cbase> -Tag em seu documento.

No seu exemplo, o Firefox procura URL (#CM-MAT) em algum lugar fora do documento incorporado. Infelizmente, ele foi corrigido apenas recentemente e, no meu caso, não encontrei solução alternativa, mas omitir a marca de base de alguma forma.

Answer 4

Sua página precisa ser servida como XML.