Pourquoi « transform-origin » ne fonctionne-t-il pas sur les groupes SVG dans Firefox ?

Le paramètre transform-origin sur le groupe SVG dans Firefox ne fonctionne pas

Impossible de faire en sorte que transform-origin prenne effet dans Firefox (v. 18 , non testé sur d'autres versions) est un problème courant. Les navigateurs WebKit fonctionnent comme prévu. Vous avez essayé de définir l'origine comme étant le centre du groupe, mais jusqu'à présent, toutes les tentatives ont échoué.

Voici le code pertinent :

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
  -webkit-animation: prop 2s infinite;
  animation: prop 2s infinite;
}

@-webkit-keyframes prop {
  0% {
    -webkit-transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(1, .8);
  }
  40% {
    -webkit-transform: scale(1, .6);
  }
  50% {
    -webkit-transform: scale(1, .4);
  }
  60% {
    -webkit-transform: scale(1, .2);
  }
  70% {
    -webkit-transform: scale(1, .4);
  }
  80% {
    -webkit-transform: scale(1, .6);
  }
  90% {
    -webkit-transform: scale(1, .8);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes prop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  20% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  40% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  50% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  60% {
    transform: matrix(1, 0, 0, .2, 0, 0);
  }
  70% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  80% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  90% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
    <g>

Solution

Le problème est dû à la façon dont les formes SVG sont dessinées. Pour que Firefox applique correctement l'origine de la transformation, le centre de la forme SVG originale doit être aux coordonnées 0, 0.

1. Dessinez la forme SVG originale de manière à ce que son centre soit à la coordonnée 0, 0 :

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

2. Ajoutez un groupe autour de la forme originale et traduisez-le à la position souhaitée :

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect>

Vous pouvez maintenant appliquer une transition CSS sur le groupe et cela devrait fonctionner correctement dans Firefox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!