Safari 6 SVG uso de etiquetas emite

Enlace: http://jsfiddle.net/xkpeD/Safari 6 SVG uso de etiquetas emite

o simplemente

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    <use xlink:href="#:example" x="20" y="20"/> 
    <defs> 
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    </defs> 
</svg>

Se muestra bien en todos los navegadores (IE9, Chrome, Firefox, Safari 5.1), pero en la nueva Safari 6 sólo 1 círculo es renderizado Parece que todas las etiquetas < use> no se procesan en Safari 6.

¿Alguna ayuda, por favor?

Fuente

2012-10-02 Vasily Shakhov

¿Ha intentado poner la sección antes del elemento ? –

Sí. No ayudó. –

Vea el último comentario aquí: http://stackoverflow.com/questions/11514248/svg-use-elements-in-chrome-not-displayed?rq=1. Si aún no lo han solucionado, puede intentar reemplazar con como una solución rápida. – skozin

La respuesta de sam.kozin funcionó para mí. Solo para que esta respuesta tenga visibilidad.

Reemplazar < uso .../> con < uso ... > </usar >

Así:

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    <use xlink:href="#:example" x="20" y="20"></use> 
    <defs> 
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    </defs> 
</svg>

Fuente

2013-05-30 17:31:55

Compruebe si está utilizando el encabezado de tipo de contenido http correcto y sirviendo su documento como XML válido. Más información en este similar question.

Fuente

2012-10-17 23:13:25 dafyk

que tenían el mismo problema, OP. Lo resuelto por hacer 2 pasos

Separado del <use> y los <defs> en 2 diferentes <svg> 's (no estoy seguro si este paso es necesario, también tuvo que hacerlo por otras razones). Nota al margen, si un <svg> solo tiene <defs>, puede usar style="display: none;" para que no ocupe espacio en el diseño.
movido el <svg> que contiene el <defs> POR ENCIMA del <svg> que contiene el <use> en mi HTML. Este paso es crucial.

Espero que esto ayude. Necesario y en funcionamiento para Safari Versión 7.1.2 a partir de hoy, 12/19/14

Fuente

2014-12-19 18:37:35

BIG UPVOTE para mover '

Estaba usando <use href=""> que estaba representando sin problemas en Firefox/Chrome, pero no en Safari. Así que tuve que cambiar a <use xlink:href=""> y esto solucionó mis problemas de representación en Safari.

Fuente

2017-06-19 17:08:59 Veera

Safari 6 SVG uso de etiquetas emite

Respuesta

Cuestiones relacionadas