transicion - La transición de SVG css3 en el relleno no funciona cuando hay un enlace externo

transition css hover

Question

Tengo un problema similar a este: aquí .

La única diferencia es que la página a la que quiero vincular el SVG es una página externa que significa: http://www.google.ca

Actualmente, en mi código, cambiar el enlace a una página interna hace que la transición de css3 funcione, pero tenerlo vinculado a un enlace externo (http: //) anula la transición de css3 que hice.

Si alguien tiene una solución a este problema o ha tratado esto antes. ¡Por favor ayuda!

¡Gracias!

 code

EDIT: ¡Olvidado! JFIDDLE LINK

Answer 1

Esto es realmente algo relacionado con el estado visitado. La razón por la que los otros comentaristas dicen que funciona es porque no han estado en sus páginas antes. Una vez que lo tengan, ya no funcionará. Intenté agregar estados visitados en el CSS y no hace diferencia.

La solución más fácil que he encontrado es simplemente agregar una cadena de consulta aleatoria a la url para que la página no se visite efectivamente, por ejemplo:

<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>

La mayoría de los sitios ignorarán una consulta que no reconocen, por lo que debería estar bien. O mejor sería eliminarlo con JS al hacer clic.

$(''body'').on(''click'', ''a'', function(e) {
e.preventDefault();
var url = $(this).prop(''href'');
window.location.href = url.split("?")[0];
});

Answer 2

Estoy un poco retrasado con esta respuesta, pero solo en caso de que pueda ayudar a otros que terminen en esta página, este problema parece ser el resultado de un error conocido de Chrome (101245) . Básicamente, la transición deja de funcionar una vez que se visita el enlace.

Por lo tanto, para solucionar este problema, suponiendo que no desea esperar a que se solucione el error, deberá usar una estrategia que engañe al navegador para que piense que el enlace no se ha visitado.

Answer 3

El error todavía existe al menos en Safari e IE 11 en el momento de escribir esto, pero usar currentColor para el relleno del SVG parece solucionarlo.

http://codepen.io/jifarris/pen/RREapp

<svg><path fill="currentColor"/></svg>

Answer 4

Acabo de cambiar el ancla en un div y le agregué un atributo de datos que contiene la URL:

<div id="homeLink" data-url="http://www.homelink.com">
<svg id="SVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 838.95 520"></svg>
</div>

Luego agregué algo de JavaScript para obtener la URL y anexarla al objeto de ubicación:

document.getElementById("homeLink").addEventListener(''click'',function(){
var url = this.getAttribute(''data-url'');
window.location.href = url;
},false);