Pourquoi la définition de l'origine de la transformation pour un groupe SVG ne fonctionne-t-elle pas dans Firefox ?

La définition de l'origine de la transformation pour le groupe SVG dans Firefox ne fonctionne pas

J'ai rencontré un problème lors de l'utilisation de transform-origin dans Firefox (version 18, autres versions non testé). Les navigateurs WebKit fonctionnent comme prévu. J'ai essayé de placer l'origine au centre du groupe, mais rien de ce que j'ai essayé jusqu'à présent n'a fonctionné.

Voici le code :

#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

J'essaie de faire pivoter un engrenage simple autour de son point central en utilisant CSS transforme les graphiques SVG. J'ai le même problème que vous dans Firefox ; la transformation d'origine ne semble pas avoir d'effet.

La solution est de dessiner la forme originale du svg pour que son centre soit à la coordonnée 0, 0 :

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

Ajoutez ensuite un groupe autour de celui-ci et effectuez un panoramique là où vous le souhaitez :

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

Vous pouvez maintenant appliquer des transformations CSS qui devraient fonctionner dans Firefox Works (j'utilise JavaScript pour ajouter des balises HTML en fonction des actions de l'utilisateur N'oubliez pas d'ajouter une classe (js-rotateObject) et d'utiliser Minimizr pour vérifier si le navigateur peut gérer les transformations et les transformations (.csstransforms.csstransitions) :

#myObject {
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
    transform: rotate(360deg);
}

J'espère que cela vous aidera.

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!