Cara menterjemahkan dari dom ke koordinat svg dan kembali lagi-tutorial css-php.cn

How to Translate from DOM to SVG Coordinates and Back Again

mata utama

, dan boleh dipertingkatkan ke saiz apa pun. Ini merumitkan menambah elemen SVG mengikut kedudukan kursor, terutamanya dalam reka bentuk responsif. viewBox
. Walau bagaimanapun, penukaran dari SVG ke koordinat DOM lebih mencabar dan memerlukan penggunaan mekanisme penguraian matriks SVG sendiri. getBoundingClientRect()
boleh digunakan untuk mana -mana elemen serta SVG sendiri untuk mengambil kira semua transformasi. .getScreenCTM()

Menggunakan SVG agak mudah - sehingga anda ingin mencampurkan interaksi DOM dan vektor.

SVGS mentakrifkan sistem koordinatnya sendiri dalam atribut

. Contohnya: viewBox

Ini menetapkan 800 unit lebar dan ketinggian 600 unit bermula dari 0,0. Unit

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

Salin selepas log masuk

ini

adalah mana -mana unit pengukuran yang digunakan untuk lukisan, dan bahagian perpuluhan unit boleh digunakan. Jika anda meletakkan SVG ini di kawasan 800 x 600 piksel, setiap unit SVG harus dipetakan terus ke satu piksel skrin. Walau bagaimanapun, imej vektor boleh dipertingkatkan ke saiz apa pun - terutamanya dalam reka bentuk responsif. SVG anda boleh diturunkan ke 400 x 300, dan juga boleh meregangkan ubah bentuk di ruang 10 x 1000. Jika anda ingin meletakkannya mengikut kedudukan kursor, ia menjadi lebih sukar untuk menambah lebih banyak elemen ke SVG ini.

NOTA: Untuk maklumat lanjut mengenai koordinat SVG, lihat artikel Viewport, Viewbox, dan Preserveaspectratio Sara Soueidan.

Elakkan koordinat penukaran Anda mungkin dapat mengelakkan penukaran antara sistem koordinat sama sekali.

SVG tertanam dalam halaman HTML (bukannya imej atau latar belakang CSS) menjadi sebahagian daripada DOM dan boleh dikendalikan seperti unsur -unsur lain. Sebagai contoh, SVG asas yang mengandungi satu bulatan:

anda boleh menggunakan kesan CSS kepadanya:

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

Salin selepas log masuk

anda juga boleh melampirkan pengendali acara untuk mengubah suai sifat:

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

Salin selepas log masuk

Contoh berikut menambah tiga puluh bulatan rawak ke imej SVG, menggunakan kesan hover dalam CSS, dan meningkatkan jejari dengan sepuluh unit menggunakan JavaScript apabila mengklik bulatan.

const mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', (e) => {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
});

Salin selepas log masuk

Lihat contoh pada codepen

SVG ke DOM COROLETINATE CONVERSION Mungkin perlu untuk melapisi elemen DOM ke atas elemen SVG -contohnya, memaparkan menu atau kotak maklumat di negara aktif yang dipaparkan di peta dunia. Dengan mengandaikan bahawa SVG tertanam dalam HTML, unsur -unsur menjadi sebahagian daripada DOM, jadi kedudukan dan saiz boleh diekstrak menggunakan kaedah

. (Buka konsol dalam contoh di atas untuk menunjukkan sifat baru mengklik bulatan selepas radius meningkat.)

`Element.getBoundingClientRect()` disokong dalam semua penyemak imbas dan mengembalikan objek domrect dengan atribut saiz piksel berikut:

`.x` dan `.left`: x-koordinat di sebelah kiri elemen relatif kepada asal Viewport

`.right`: koordinat x di sebelah kanan elemen relatif kepada asal viewport

`.y` dan `.top`: koordinat y bahagian atas elemen relatif kepada asal viewport

`.bottom`: Koordinat Y dari bahagian bawah elemen relatif kepada asal Viewport

`.width`: lebar elemen (tidak disokong dalam IE8 dan ke bawah, tetapi sama seperti `.right` tolak `.left`)

`.height`: ketinggian elemen (tidak disokong dalam IE8 dan ke bawah, tetapi sama seperti `.bottom` tolak `.top`)

Semua koordinat adalah relatif kepada viewport penyemak imbas, jadi mereka berubah sebagai skrol halaman. Kedudukan mutlak pada halaman boleh dikira dengan menambahkan `window.scrollX` ke `.left` dan `window.scrollY` ke `.top`.

dom ke svg menyelaraskan penukaran

Ini lebih mencabar. Katakan anda mahu meletakkan elemen SVG baru pada kotak pandangannya di mana peristiwa klik berlaku. Objek pengendali acara menyediakan koordinat pixel DOM .clientX dan .clientY, tetapi mesti ditukar kepada unit SVG.

Anda mungkin berfikir bahawa anda boleh mengira koordinat mata SVG dengan menggunakan faktor pendaraban. Sebagai contoh, jika SVG lebar 1000 unit diletakkan dalam bekas 500 piksel lebar, anda boleh membiak sebarang koordinat DOM X sebanyak 2 untuk mendapatkan kedudukan SVG. ini tidak akan berfungsi! ...

SVG tidak dijamin sempurna untuk bekas anda.
Jika saiz elemen berubah -mungkin mengubah saiz penyemak imbas sebagai tindak balas kepada pengguna -faktor lebar dan ketinggian mesti dikira semula.
SVG atau satu atau lebih elemen boleh diubah dalam ruang 2D atau 3D.
Walaupun anda mengatasi halangan -halangan ini, ia tidak pernah berfungsi seperti yang anda harapkan dan sering terdapat kesilapan.

bernasib baik, SVG menyediakan mekanisme penguraian matriks sendiri untuk menukar koordinat. Langkah pertama adalah untuk membuat titik pada SVG menggunakan kaedah createSVGPoint() dan lulus skrin/peristiwa x dan y koordinat ke:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

Salin selepas log masuk

Anda kemudian boleh memohon transformasi matriks yang dibuat dari matriks songsang kaedah SVG .getScreenCTM(), yang memetakan unit SVG untuk menyelaras skrin:

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

Salin selepas log masuk

SVGP kini mempunyai .x dan .y sifat, yang menyediakan koordinat pada kotak pandangan SVG.

kod berikut meletakkan bulatan pada titik yang diklik pada kanvas SVG:

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

Salin selepas log masuk

nota: Kaedah createElementNS() adalah sama dengan kaedah standard DOM , kecuali ia menentukan ruang nama XML. Dalam erti kata lain, ia berfungsi pada dokumen SVG dan bukannya HTML. createElement()

Tukar untuk mengubah koordinat SVG

Terdapat satu lagi aspek yang lebih kompleks. SVG atau satu elemen boleh diubah oleh terjemahan, skala, putaran, dan/atau condong, yang mempengaruhi koordinat SVG akhir. Sebagai contoh, lapisan <g> berikut adalah 4 kali lebih besar daripada unit SVG standard, jadi koordinat akan menjadi satu perempat daripada koordinat yang mengandungi SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

Salin selepas log masuk

Rectangle yang dihasilkan kelihatan seperti mempunyai lebar dan ketinggian 400 unit pada kedudukan 200, 200.

Nasib baik, kaedah

boleh digunakan untuk mana -mana elemen serta SVG itu sendiri. Matriks yang dihasilkan mengambil kira semua transformasi, jadi anda boleh membuat fungsi penukaran .getScreenCTM() mudah: svgPoint()

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

Salin selepas log masuk

Demonstrasi berikut berfungsi dalam semua pelayar moden,

(jika anda menukar JavaScript ke ES5, ia berfungsi dalam IE11 juga!) . Apabila mengklik/mengklik pada SVG, bulatan ditambah ke titik kursor.

Ini juga berlaku apabila mengklik pada kawasan

yang diubah, tetapi lulus elemen dan bukannya SVG sendiri ke fungsi <g> untuk memastikan koordinat yang betul dikira: svgPoint()

Lihat contoh pada codepen

Sebaik -baiknya, adalah lebih baik untuk mengelakkan DOM ke/dari penukaran koordinat SVG, tetapi apabila ini tidak mungkin, gunakan kaedah yang diterangkan di atas untuk memastikan proses itu teguh pada semua saiz halaman.

Soalan Lazim Mengenai Koordinat DOM ke SVG dan Penukaran Balik

Apakah perbezaan antara koordinat DOM dan SVG?

Model objek dokumen (DOM) dan grafik vektor berskala (SVG) adalah kedua -dua komponen pembangunan web, tetapi mereka mempunyai kegunaan yang berbeza. DOM adalah antara muka pengaturcaraan untuk dokumen HTML dan XML. Ia mewakili struktur dokumen dan menyediakan cara untuk memanipulasi kandungan dan perwakilan visualnya. Sebaliknya, SVG adalah format imej vektor berasaskan XML untuk grafik dua dimensi. Perbezaan utama antara keduanya adalah sistem koordinat mereka. DOM menggunakan sistem koordinat berasaskan piksel, manakala SVG menggunakan sistem berdasarkan atribut

, yang boleh diperkatakan dan diubah. viewBox

Bagaimana untuk menukar koordinat DOM ke koordinat SVG?

Menukar koordinat DOM ke koordinat SVG melibatkan mewujudkan titik dalam sistem koordinat SVG menggunakan kaedah

elemen SVG. Anda kemudian boleh menggunakan kaedah createSVGPoint untuk menukar titik ke sistem koordinat SVG. Kaedah ini mengambil objek Dommatrix, yang mewakili matriks transformasi elemen SVG. matrixTransform

Bagaimana untuk menukar koordinat SVG kembali ke koordinat DOM?

Untuk menukar koordinat SVG kembali ke koordinat DOM, anda boleh menggunakan kaedah

objek SVGMatrix. Kaedah ini mengembalikan objek Svgmatrix baru, yang merupakan matriks songsang matriks asal. Dengan mendarabkan mata SVG oleh matriks songsang ini, anda boleh menukarnya kembali ke sistem koordinat DOM. inverse

Apakah peranan atribut Viewbox dalam SVG?

Atribut

dalam

dalam SVG digunakan untuk menentukan nisbah aspek dan koordinat sistem imej SVG. Ia membolehkan anda mengawal skala dan kedudukan elemen SVG. Atribut viewBox mengambil empat nilai: min-x, min-y, lebar, dan ketinggian. Nilai -nilai ini menentukan segi empat tepat dalam sistem koordinat SVG. viewBox

Bagaimana menggunakan pakej DOM ke SVG dalam projek saya?

DOM ke pakej SVG adalah alat yang berguna untuk menukar koordinat DOM kepada koordinat SVG dan penukaran terbalik. Untuk menggunakannya dalam projek anda, anda perlu memasangnya menggunakan NPM (pengurus pakej untuk bahasa pengaturcaraan JavaScript). Setelah dipasang, anda boleh memperkenalkannya dalam fail JavaScript anda dan melakukan penukaran menggunakan kaedahnya.

Apakah atribut CX dalam SVG?

Atribut

dalam cx dalam SVG digunakan untuk menentukan koordinat X pusat bulatan. Ia adalah salah satu sifat asas untuk membuat bulatan SVG. Nilai atribut cx adalah panjang dalam sistem koordinat pengguna.

Bolehkah saya menggunakan kedua -dua DOM dan SVG di laman web saya?

Ya, anda boleh menggunakan kedua -dua DOM dan SVG di laman web anda. SVG tertanam dalam HTML, jadi ia adalah sebahagian daripada DOM. Anda boleh menggunakan kaedah dan sifat DOM untuk memanipulasi elemen SVG. Ini membolehkan anda membuat grafik dinamik dan interaktif di laman web anda.

Bagaimana sistem koordinat dalam SVG berbeza dari yang di HTML?

Sistem koordinat dalam SVG adalah berbeza dari yang dalam HTML. Dalam HTML, sistem koordinat adalah berasaskan piksel dan asalnya berada di sudut kiri atas halaman. Dalam SVG, sistem koordinat ditakrifkan oleh atribut viewBox, dan asalnya berada di sudut kiri atas viewBox. Ini menjadikan grafik SVG berskala dan bebas daripada resolusi.

Bagaimana untuk menukar koordinat SVG?

anda boleh menggunakan atribut transform untuk menukar koordinat SVG. Harta ini membolehkan anda memohon pelbagai transformasi kepada elemen SVG, seperti terjemahan, putaran, skala, dan mencondongkan. Nilai atribut transform adalah senarai fungsi transformasi, setiap fungsi digunakan untuk unsur -unsur dalam urutan yang disenaraikan.

Apakah beberapa kes penggunaan biasa untuk menukar antara koordinat DOM dan SVG?

Dalam banyak kes, sangat berguna untuk menukar antara koordinat DOM dan SVG. Sebagai contoh, jika anda membuat graf SVG interaktif, anda mungkin perlu menukar koordinat tetikus (terletak di sistem koordinat DOM) kepada koordinat SVG untuk memanipulasi elemen SVG. Sebaliknya, jika anda membuat elemen SVG tersuai, anda mungkin perlu menukar koordinatnya kembali ke sistem koordinat DOM untuk meletakkannya dengan betul pada halaman.

Atas ialah kandungan terperinci Cara menterjemahkan dari dom ke koordinat svg dan kembali lagi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!