SVG Gradient se vuelve negro cuando hay una etiqueta BASE en la página HTML?

Estoy usando la Biblioteca JavaScript de Raphaël para crear elementos SVG en una página HTML y usar CodeIgniter como un framework PHP. En el marco de CodeIgniter necesito agregar una etiqueta <base> en el encabezado del documento HTML para usar JS, CSS e imágenes, pero causó un problema extraño en el elemento SVG.SVG Gradient se vuelve negro cuando hay una etiqueta BASE en la página HTML?

Cuando uso la etiqueta <base>, los degradados no funcionan. En cambio, el objeto se vuelve negro. Se comporta exactamente igual con objetos de ruta llenos de imágenes.

Un ejemplo de secuencia de comandos de degradado es here.

Fuente

2011-10-13 Ahmet Yildirim

La respuesta correcta está aquí ... http://stackoverflow.com/questions/19742805/angular-and-svg-filters – danday74

si usa Angular2, solución en http://stackoverflow.com/a/34535256/3218806 – maxbellec

Y para aquellos que usan AngularJS en su lugar: https://github.com/angular/angular.js/issues/8934#issuecomment-265037833 – Nobita

SVG Gradients se definen en el documento con un atributo único id, y después se hace referencia desde otro elemento como una dirección URL . Normalmente, la dirección URL es sólo el fragmento identificador, por ejemplo .:

<defs> 
    <linearGradient id="foo" ...>...</linearGradient> 
</defs> 
<rect fill="url(#foo)" ... />

Si se introduce un elemento con un atributo <base>href, cambia el significado de esas direcciones URL en el documento. En lugar de calcularse en relación con el documento actual, se computan en relación con el URI separado especificado.

Fuente

2011-10-14 03:57:06 Phrogz

hay alguna solución para excluir svg de la etiqueta base –

de todos modos voy a aceptar su respuesta, pero háganmelo saber si conoce una forma de evitar este problema sin eliminar la etiqueta base –

@ AhmetYıldırım Puede intentar con una URL completa a su página con la etiqueta SVG, por ejemplo 'fill =" url (http://mydomain.com/foo/bar.html#gradient) ''. Sin embargo, sugiero que se fije CodeIgniter para que no requiera una etiqueta ''. ¿Por qué necesitarías esto? – Phrogz

Su definición del degradado se está dañado también a veces hay problemas con Opera para ciertos usos de objetos gradiente llena

Fuente

2011-10-13 23:37:43 Chasbeen

Por favor, presente errores en Opera aquí: http://bugs.opera.com/wizard. Y por favor incluya un caso de prueba, o un enlace a uno. Gracias :) –

ver también el siguiente informe de error: https://bugzilla.mozilla.org/show_bug.cgi?id=652991

parecer, la noción de referencia (el gradiente de relleno o marcador de fin, sospecho, también) por URL es problemático para las aplicaciones de estilo AJAX que también utilizan la historia .pushState().

Fuente

2012-03-17 01:13:31

Tuve un problema similar: el degradado se muestra negro en Chrome, pero ni siquiera tenía una etiqueta <base>.

Cambio

<stop offset="1" style="stop-color:#F26722"/>

<stop offset="1" stop-color="#F26722"/>

parecía para solucionar el problema.

Otro error relacionado era Chrome ser incapaz de analizar transform="translate(...)" en <g> elementos, que tenía que moverlos a <path> -s individuales.

Fuente

2016-02-24 22:43:42 Nikita

SVG Gradient se vuelve negro cuando hay una etiqueta BASE en la página HTML?

Respuesta

Cuestiones relacionadas