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

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

Susan Sarandon

Libérer： 2024-11-29 11:13:11

original

429 Les gens l'ont consulté

Why Doesn't Setting the Transform Origin for an SVG Group Work in 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);
  }
}

Copier après la connexion

<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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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);
}

Copier après la connexion

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!