Estoy tratando de activar una animación de rotación en un SVG en mi sitio web. Definitivamente funciona, pero el problema es cuando muevo el mouse cuando estoy sobre el elemento que cancela la animación.

Así que incluyo un elemento svg de objeto:

<object type="image/svg+xml" data="branching4.svg" id="branching">
    Your browser does not support SVG
</object> 

Que es un documento SVG largo pero aquí hay una hoja de estilo adjunta:

#rectangle1, #rectangle2, #rectangle3{
    perspective: 1500px;
}
#rectangle1.flip .card, #rectangle2.flip .card, #rectangle3.flip .card {
    transform: rotateX(180deg);
}
#rectangle1 .card, #rectangle2 .card, #rectangle3 .card{
    transform-style:preserve-3d;
    transition:1s;
}
#rectangle1 .face, #rectangle2 .face, #rectangle3 .face{
    backface-visibility: hidden;
}
#rectangle1 #front1{
    transform: rotateX(0deg);
}
#rectangle1 #back1{
    transform: rotateX( 180deg );
}
#rectangle2 #front2{
    transform: rotateX(0deg);
}
#rectangle2 #back2{
    transform: rotateX( 180deg );
}
#rectangle3 #front3{
    transform: rotateX(0deg);
}
#rectangle3 #back3{
    transform: rotateX( 180deg );
}
#rectangle1.flipped, #rectangle2.flipped, #rectangle3.flipped {
    transform: rotateX( 180deg );
}

Puedes ver la estructura svg en el jsfiddle

Y finalmente el guión:

window.onload=function() {
    var svgDoc = $("#branching")[0].contentDocument; // Get the document object for the SVG
    $(".st4", svgDoc).css("font-family", "robotolight,Helvetica Neue,Helvetica,Arial,sans-serif");
    $("#rectangle1", svgDoc).hover(function(){
        $(this, svgDoc).toggleClass("flip");
    });
    $("#rectangle2", svgDoc).hover(function(){
        $(this, svgDoc).toggleClass("flip");
    });
    $("#rectangle3", svgDoc).hover(function(){
        $(this, svgDoc).toggleClass("flip");
    });

};

También probé con CSS, es el mismo problema.

Aquí hay un jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1ra pregunta:

¿Cómo puedo tener una transición de rotación fluida al mover el mouse sobre el elemento?

2da pregunta:

¿Cómo puedo tener una rotación Y que permanezca en el lugar y no se traslade a la izquierda? Pruébalo en el violín

3ra pregunta:

¿Por qué jsfiddle muestra bien el svg en firefox y no en Chrome? Además, la perspectiva no parece funcionar en cromo ... ¿POR QUÉ?

¿Alguna idea?

5
Baptiste Arnaud 28 jun. 2016 a las 14:54

3 respuestas

La mejor respuesta

Desafortunadamente, creo que muchos de los problemas que está experimentando son simplemente el resultado de un mal soporte del navegador para transformaciones css (3D) en elementos svg.

Mover los elementos de las tarjetas <g> a sus propios <svg> dentro de un <div> ordinario, y aplicar la interactividad al elemento div facilitaría mucho las cosas.

.card {
  display: inline-block;
  transform-origin: center;
  perspective: 1000px;
  background: grey;
}
.card-inner {
  width: 100px;
  height: 200px;
  transition: transform .4s;
}
.card-inner:hover,
.card:hover > .card-inner {
  transform: rotateY(180deg);
}
<div class="card">
  <div class="card-inner" style="background: yellow">
    Add svg card here
  </div>
</div>

<div class="card">
  <div class="card-inner" style="background: blue">
    Add svg card here
  </div>
</div>

<div class="card">
  <div class="card-inner" style="background: green">
    Add svg card here
  </div>
</div>

¿Cómo puedo tener una transición de rotación fluida al mover el mouse sobre el elemento?

Una vez que la tarjeta gira, pierde fácilmente el vuelo estacionario. Sin embargo, el estado de desplazamiento se se aplicará al elemento subyacente. Si se asegura de que este es el padre de la tarjeta, puede usar esta regla CSS para diseñar:

.card-inner:hover,
.card:hover > .card-inner {
  transform: rotateY(180deg);
}

¿Cómo puedo tener una rotación Y que permanezca en el lugar y no se traslade a la izquierda? Pruébalo en el violín

Tendrá que usar transform-origin, como lo intentó. Simplemente no funciona para elementos svg ...

transform-origin: center;

¿Por qué jsfiddle muestra bien el svg en Firefox y no en Chrome? Además, la perspectiva no parece funcionar en cromo ... ¿POR QUÉ?

Como dije, simplemente no es compatible correctamente ...

3
user3297291 1 jul. 2016 a las 13:12

Re su primer problema con la tapa

Parece que el problema es que cuando las cartas giran, se encogen. Entonces el mouse ya no está sobre la tarjeta y cuando la tarjeta se mueve nuevamente, vuelve a entrar y el evento mouseenter se dispara nuevamente. Luego, todo el proceso se repite (siempre que el mouse se mueva).

La solución es evitar que el evento se vuelva a disparar hasta que finalice la animación.

Hay varias formas de solucionar esto, pero aquí hay una solución:

// Flag to keep track of whether rectangle1 is flipping
var flipping1 = false;
$("#rectangle1").mouseenter(function() {
    // Only toggle the animation if we aren't already doing so
    if (!flipping1) {
        // Add the class to start the flip
        $(this).toggleClass("flip");
        // Set flag to mark that we are flipping
        flipping1 = true;
        // Then in just over a second, turn the flag off again
        setTimeout(function () {
            flipping1 = false;
        }, 1010);
    }
});

Aquí hay un violín que muestra esta técnica trabajando solo en el rectángulo1.

https://jsfiddle.net/7f7wjvvt/4/

1
Paul LeBeau 1 jul. 2016 a las 12:24

No tengo una respuesta completa, pero para su primera pregunta, sugeriría reemplazar el .hover con un disparador .mouseenter, y para el segundo simplemente perder la perspectiva. Además, traté de prefijar su CSS, pero fue en vano, parece que hay algunos problemas de compatibilidad entre los navegadores aquí.

0
Paul Daniel Ghiran 1 jul. 2016 a las 12:18