javascript - ¿Gradiente SVG se vuelve negro cuando hay una etiqueta BASE en la página HTML?
model-view-controller canvas (4)
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.
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 script de gradiente de ejemplo está here .
Su definición de gradiente se está corrompiendo También a veces hay problemas con Opera para ciertos usos de objetos llenos de degradado
Tuve un problema similar: el degradado se muestra negro en Chrome, pero ni siquiera tenía una etiqueta <base> .
Cambiando
<stop offset="1" style="stop-color:#F26722"/>
a
<stop offset="1" stop-color="#F26722"/>
Pareció arreglar el problema.
Otro error no relacionado fue que Chrome no podía analizar transform="translate(...)" en elementos <g> , tuve que moverlos a <path> -s individuales.
vea también el siguiente informe de error: https://bugzilla.mozilla.org/show_bug.cgi?id=652991
aparentemente, la noción de referencia (el gradiente de relleno o el final de marcador, sospecho, también) por URL es problemático para las aplicaciones de estilo AJAX que también usan history.pushState ().
Los degradados SVG se definen en el documento con un único atributo de id y, a continuación, se hace referencia desde otro elemento como una URL. Normalmente, la URL es solo el fragmento identificador, por ejemplo:
<defs>
<linearGradient id="foo" ...>...</linearGradient>
</defs>
<rect fill="url(#foo)" ... />
Si introduce un elemento <base> con un atributo href , cambia el significado de tales 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.