Filtros SVG en Firefox

Por algún motivo, no puedo hacer que mis filtros SVG funcionen en Firefox. Sin embargo, funcionan bien en Opera. El elemento cuya propiedad he configurado para el filtro simplemente desaparece. Es muy extraño.Filtros SVG en Firefox

Aquí está mi 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); 
}

Alguna idea? Gracias

Fuente

2010-05-17 Nick

Paul Irish hecho una demostración que aplica SVG Filters to HTML 5 video.

El código fuente para the live demo muestra cómo cambiar entre los filtros. En ese caso, todas las piezas de SVG se escriben directamente en la página como etiquetas, y no se insertan dinámicamente a través de JavaScript.

Podría ser útil tratar de hacerlo funcionar usando etiquetas verticales, luego cambiar a JavaScript una vez que esté funcionando. Puede haber alguna extraña rareza en la implementación (error) que solo se expresa cuando se crea dinámicamente (/ especulación).

Además, puede depender de la versión de Firefox que esté utilizando. No estoy seguro de qué versión comenzó a admitir filtros SVG, pero la publicación de Paul parece sugerir que puede requerir una compilación nocturna.

¡Buena suerte!

Fuente

2010-05-17 21:19:57 jimbojw

Esa matriz de colores me parece que debe activar todos los componentes de todos los colores, haciendo que el elemento sea completamente blanco.

(También podría ser más fácil para otras personas averiguar si ha publicado la URL de un ejemplo completo que muestra el problema en lugar de solo un fragmento de JavaScript, que permitiría a otras personas probar las teorías de por qué está fallando.)

Fuente

2010-05-17 21:45:49

Sí, el resultado debería ser completamente blanco si se aplica el filtro. Me interesaría saber más sobre lo que está haciendo Opera en tu ejemplo original (supongo que serían elementos en el espacio de nombres incorrecto, ya que usas createElement en lugar de createElementNS). Un equivalente no guionizado del fragmento anterior muestra que Opera y Firefox se comportan igual (salida blanca). –

Sí, lo siento, estaba jodiendo con los valores y me olvidé de restablecerlos. He intentado algunos valores drásticamente diferentes sin cambios. Acabo de dejar de agregar dinámicamente los elementos svg con javascript y los agregué manualmente. Funciona ahora, gracias. – Nick

su página debe ser servida como xml.

Fuente

2010-09-12 11:20:11 Henry

Esto podría estar relacionado con Firefox Bug #308590. En resumen, Firefox no puede resolver las URL de filtro cuando su SVG se carga desde una URL de datos o tiene una base < > -Tag en su documento.

En su ejemplo, Firefox busca url (# cm-mat) en algún lugar fuera de su documento incrustado. Desafortunadamente, solo se corrigió recientemente y en mi caso no encontré ninguna solución alternativa, sino omitir la etiqueta base de alguna manera.

Fuente

2011-06-14 15:19:33

Gracias, tu comentario me salvó de algunos problemas. Tenía mi matriz de colores SVG especificada como una URL de datos en mi CSS y que funcionaba en Firefox 11 pero luego mi cliente no podía verla, usando Firefox 4.0.1 (!!!). Solo podía ver el blanco en lugar de las imágenes. Traté de eliminar mi etiqueta y no hizo nada. Mover el código a un svg externo solucionó el problema. Probé con Firefox 4.0.1 para asegurarme de que funcionara y también advertí al cliente que necesita una actualización para estar seguro en línea. :) – alexg

Respuesta

Cuestiones relacionadas