Rumah >hujung hadapan web >tutorial css >Cara menterjemahkan dari dom ke koordinat svg dan kembali lagi
mata utama
viewBox
getBoundingClientRect()
.getScreenCTM()
SVGS mentakrifkan sistem koordinatnya sendiri dalam atribut
. Contohnya: viewBox
<code class="language-xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600"></svg></code>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.
Elakkan koordinat penukaran Anda mungkin dapat mengelakkan penukaran antara sistem koordinat sama sekali.
anda boleh menggunakan kesan CSS kepadanya:
<code class="language-xml"><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"></circle> </svg></code>anda juga boleh melampirkan pengendali acara untuk mengubah suai sifat:
<code class="language-css">circle { stroke-width: 5; stroke: #f00; fill: #ff0; } circle:hover { stroke: #090; fill: #fff; }</code>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.
<code class="language-javascript">const mycircle = document.getElementById('mycircle'); mycircle.addEventListener('click', (e) => { console.log('circle clicked - enlarging'); mycircle.setAttribute('r', 60); });</code>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
.
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! ...
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:
<code class="language-xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600"></svg></code>
Anda kemudian boleh memohon transformasi matriks yang dibuat dari matriks songsang kaedah SVG .getScreenCTM()
, yang memetakan unit SVG untuk menyelaras skrin:
<code class="language-xml"><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"></circle> </svg></code>
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:
<code class="language-css">circle { stroke-width: 5; stroke: #f00; fill: #ff0; } circle:hover { stroke: #090; fill: #fff; }</code>
nota: Kaedah 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 Rectangle yang dihasilkan kelihatan seperti mempunyai lebar dan ketinggian 400 unit pada kedudukan 200, 200. boleh digunakan untuk mana -mana elemen serta SVG itu sendiri. Matriks yang dihasilkan mengambil kira semua transformasi, jadi anda boleh membuat fungsi penukaran (jika anda menukar JavaScript ke ES5, ia berfungsi dalam IE11 juga!) . Apabila mengklik/mengklik pada SVG, bulatan ditambah ke titik kursor.
yang diubah, tetapi lulus elemen dan bukannya SVG sendiri ke fungsi
, yang boleh diperkatakan dan diubah. elemen SVG. Anda kemudian 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. dalam SVG digunakan untuk menentukan nisbah aspek dan koordinat sistem imej SVG. Ia membolehkan anda mengawal skala dan kedudukan elemen SVG. Atribut 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. dalam 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. 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 anda boleh menggunakan atribut 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. createElementNS()
adalah sama dengan kaedah standard DOM createElement()
Tukar untuk mengubah koordinat SVG
<g></g>
berikut adalah 4 kali lebih besar daripada unit SVG standard, jadi koordinat akan menjadi satu perempat daripada koordinat yang mengandungi SVG: <code class="language-xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 600"></svg></code>
.getScreenCTM()
mudah: svgPoint()
<code class="language-xml"><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"></circle>
</svg></code>
Demonstrasi berikut berfungsi dalam semua pelayar moden, <g></g>
untuk memastikan koordinat yang betul dikira: svgPoint()
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 viewBox
Menukar koordinat DOM ke koordinat SVG melibatkan mewujudkan titik dalam sistem koordinat SVG menggunakan kaedah createSVGPoint
untuk menukar titik ke sistem koordinat SVG. Kaedah ini mengambil objek Dommatrix, yang mewakili matriks transformasi elemen SVG. matrixTransform
Untuk menukar koordinat SVG kembali ke koordinat DOM, anda boleh menggunakan kaedah inverse
Atribut
dalam 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?
Apakah atribut CX dalam SVG?
Atribut 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?
Bagaimana sistem koordinat dalam SVG berbeza dari yang di HTML?
viewBox
, dan asalnya berada di sudut kiri atas viewBox
. Ini menjadikan grafik SVG berskala dan bebas daripada resolusi. Bagaimana untuk menukar koordinat SVG?
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?
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!