Problema con SVG en SAFARI

daicon · #1 (**permalink**) 07/02/2014, 09:29

Hola,

Tengo este simple codigo en mi web:

Código:

	<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" version="1.1">
     <clipPath id="clipping">
      <circle cx="18" cy="15" r="12" />
    </clipPath>
	<image clip-path="url(&quot;#clipping&quot;)" width="35" height="35" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="$zc_icon_path/$teicon" />

	</svg>

Pues bueno, se ve en todos los navegadores bien, pero safari no me muestra la imagen, directamente no se ve nada....
¿Que esta pasando?

PHPeros · #2 (**permalink**) 07/02/2014, 09:30

Hay algunos navegadores (versiones) que no lo soportan.

Tabla de compatibilidad.

daicon · #3 (**permalink**) 07/02/2014, 09:35

Cita:

Iniciado por PHPeros

Hay algunos navegadores (versiones) que no lo soportan.

Tabla de compatibilidad.

Pues si me acabo de bajar la version de windows, la ultima, según lo que pone en ayuda de safari, es la 5.1.7. Y según esa tabla esta soportado....

pzin · #4 (**permalink**) 07/02/2014, 11:30

A mi el código me funciona, aunque es la versión 7.0.1 para Mac.

daicon · #5 (**permalink**) 07/02/2014, 11:47

Cita:

Iniciado por pzin

A mi el código me funciona, aunque es la versión 7.0.1 para Mac.

Bueno, estoy viendo que el problema puede ir mas alla todavia...
Testeando me he encontrado con lo siguiente.

La web es Joomla.
Dentro de la web hay dos secciones principales. En IE me funciona perfectamente en las dos secciones, pero en chrome y firefox, en la segunda seccion no me hace el recorte que se supone deberia de hacerle a la imagen.

Las dos secciones tienen practicamente lo mismo. ¿Que narices esta pasando?

daicon · #6 (**permalink**) 07/02/2014, 13:00

Bueno, por si sirve para que me podais ayudar...
He conseguido que en Safari me funcione en todos las secciones, sustituyendo el codigo anterior por:

Código:

<svg width="50" height="50" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
	<image xlink:href="/images/category/noticias.png" x="0" y="0" height="35" width="35" clip-path="url(&quot;#clipping12&quot;)"/>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" version="1.1">
     <clipPath id="clipping12">
       <circle cx="18" cy="15" r="12"></circle>
     </clipPath>
</svg>

No logro entender que esta pasando...
Y sigue sin funcionarme en chrome y firefox en la segunda seccion de mi web...

aun que hay una diferencia con respecto a lo que pasaba en Safari, en esta ocasion se ve las imagenes, pero no las recorta