Rumah > hujung hadapan web > tutorial css > Mengapa Menetapkan Asal Transformasi untuk Kumpulan SVG Tidak Berfungsi dalam Firefox?

Mengapa Menetapkan Asal Transformasi untuk Kumpulan SVG Tidak Berfungsi dalam Firefox?

Susan Sarandon
Lepaskan: 2024-11-29 11:13:11
asal
433 orang telah melayarinya

Why Doesn't Setting the Transform Origin for an SVG Group Work in Firefox?

Menetapkan transform asal untuk kumpulan SVG dalam Firefox tidak berfungsi

Menghadapi masalah menggunakan transform-origin dalam Firefox (versi 18, versi lain tidak diuji). Pelayar WebKit berfungsi seperti yang diharapkan. Saya telah cuba menetapkan asal kepada pusat kumpulan, tetapi tiada apa yang saya cuba setakat ini berjaya.

Berikut ialah kod:

#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);
  }
}
Salin selepas log masuk
<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>
Salin selepas log masuk

Penyelesaian

Saya cuba memutarkan gear ringkas di sekeliling titik tengahnya menggunakan CSS mengubah grafik svg. Saya mengalami masalah yang sama seperti anda dalam Firefox nampaknya tidak mempunyai sebarang kesan.

Penyelesaian adalah dengan melukis bentuk svg asal supaya pusatnya berada pada koordinat 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>
Salin selepas log masuk

Kemudian tambahkan kumpulan di sekelilingnya dan sorot ke tempat yang anda inginkan:

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

Kini anda boleh menggunakan transformasi CSS yang sepatutnya berfungsi dalam Firefox Works (saya menggunakan JavaScript untuk menambah teg HTML berdasarkan tindakan pengguna Ingat untuk menambah kelas (js-rotateObject) dan gunakan Minimizr untuk menyemak sama ada penyemak imbas boleh mengendalikan transformasi dan transformasi (.csstransforms.csstransitions):

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

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

Semoga ia membantu.

Atas ialah kandungan terperinci Mengapa Menetapkan Asal Transformasi untuk Kumpulan SVG Tidak Berfungsi dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan