Saya memiliki gambar SVG yang menunjukkan wilayah geografis. http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten_2009.svg
Saya ingin menampilkan gambar SVG di halaman web, dan menggunakan kombinasi JavaScript dan CSS untuk berinteraksi dengan gambar tersebut. (misalnya, mendeteksi klik pada suatu wilayah, mengatur warna latar belakang yang berbeda untuk suatu wilayah).
Saya tahu pertanyaan ini ditanyakan beberapa kali di StackOverflow, tetapi saya tidak dapat menemukan contoh kode yang lengkap untuk dikerjakan lebih lanjut. Setiap rekomendasi tentang paket JavaScript, seperti jQuery, atau plug-in dipersilakan.
Pemahaman saya terhadap pertanyaan tersebut adalah bahwa ada beberapa aspek yang harus diselesaikan:
Mempersiapkan gambar Mempersiapkan gambar
Pertama-tama, saya sarankan untuk membersihkan gambar. Inkscape meninggalkan semua jenis hal di sana yang tidak Anda perlukan, termasuk elemen dan atribut dalam ruang nama sodipodi:
dan inkscape:
serta atribut gaya yang berulang dan / atau berlebihan. Anda tidak perlu menghapusnya, namun hal ini akan menghemat bandwidth/waktu pemuatan, dan jika Anda ingin bekerja dengan pencocokan CSS, maka atribut gaya akan menghalangi Anda.
Pada berkas contoh Anda, Anda memiliki 472 kali atribut style yang sama. Hapus semuanya dan buat aturan CSS yang setara satu kali.
Anda juga dapat menambahkan beberapa informasi tentang kota pada markup. Misalnya, Anda dapat mengubah ID dari setiap jalur yang mewakili kotamadya sesuai dengan namanya. Anda juga dapat menggunakan atribut data-*
untuk tujuan ini. Yang terakhir ini memiliki keuntungan bahwa Anda dapat menggunakan spasi. Lihat di bawah ini untuk mengetahui bagaimana hal ini berguna untuk interaksi, terutama dengan CSS.
Menanamkan gambar
Saya sarankan untuk menggunakan SVG sebaris, terutama jika Anda ingin berinteraksi dengan CSS/JavaScript. Ini berarti, Anda cukup menambahkan markup SVG ke HTML Anda, atau Anda memuat dan menyisipkannya menggunakan Ajax. Yang terakhir ini memiliki manfaat bahwa halaman di sekitarnya dimuat lebih cepat dan terasa lebih responsif.
Contoh elemen SVG sebaris:
<div id="svgContainer">
<!-- This is an HTML div, and inside goes the SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<circle r="50" cx="50" cy="50" fill="green"/>
</svg>
</div>
Contoh sederhana tentang cara memuat SVG menggunakan Ajax:
xhr = new XMLHttpRequest();
xhr.open("GET","my.svg",false);
// Following line is just to be on the safe side;
// not needed if your server delivers SVG with correct MIME type
xhr.overrideMimeType("image/svg+xml");
xhr.send("");
document.getElementById("svgContainer")
.appendChild(xhr.responseXML.documentElement);
Bagaimana cara menggunakan CSS
SVG dapat diberi gaya seperti HTML. Tentu saja, SVG memiliki set propertinya sendiri, seperti fill-opacity
atau stroke-dasharray
dan tidak mendukung banyak properti HTML, seperti margin
, posisi
, atau sejenisnya. Tetapi mekanisme pemilihnya 100% sama.
Anda dapat menggabungkan CSS untuk SVG sebaris dengan CSS untuk HTML Anda, baik di dalam elemen <style>
atau file CSS eksternal. Anda juga dapat menggunakan elemen <style>
di dalam kode SVG dan atribut style
.
Dengan asumsi Anda memberi elemen SVG Anda ID yang berarti atau atribut data-*
, ada dua cara untuk menyorot kota menggunakan CSS:
#Bronckhorst, #Laarbeek {fill:red}
atau
*[data-gemeente=Bronckhorst], *[data-gemeente=Laarbeek] {fill:red}
Atau, tentu saja, Anda dapat mengubah atribut gaya dari masing-masing elemen. Properti juga didukung sebagai atribut, misalnya style="stroke-width:2"
juga dapat ditentukan seperti stroke-width="2"
. Jika properti yang sama ditetapkan menggunakan atribut dan CSS (baik menggunakan atribut gaya, elemen gaya, atau lembar gaya eksternal), CSS akan menimpa atribut.
Interaksi JavaScript Interaksi JavaScript
Pada dasarnya tidak ada perbedaan antara HTML dan SVG dalam hal interaksi JavaScript, setidaknya selama Anda menggunakan DOM biasa. Ini berarti, fitur khusus HTML seperti innerHTML
tidak didukung dalam SVG (yaitu tidak ada innerSVG
). Tetapi SVG memiliki set metode DOM khusus grafisnya sendiri (lihat spesifikasi W3C).
Satu hal yang perlu diperhatikan adalah pekerjaan dengan ruang nama. Semua elemen SVG harus berada di dalam namespace SVG, dan ketika membuatnya menggunakan JavaScript, createElementNS()
harus digunakan, bukan createElement()
:
var use = document.createElementNS("http://www.w3.org/2000/svg","use")
Demikian juga, atribut dalam ruang nama XLink (yaitu xlink:href
) harus dimanipulasi menggunakan setAttributeNS()
, bukan setAttribute()
:
use.setAttributeNS("http://www.w3.org/1999/xlink","href","#foo")
Karena pustaka seperti jQuery sebagian bergantung pada fitur khusus HTML, akan lebih aman untuk menghindarinya saat memanipulasi SVG. Ada juga pustaka khusus SVG seperti Raphaël dan D3.js yang dapat berguna untuk tujuan tertentu dan layak untuk dilihat. Raphaël sangat berguna karena kompatibel dengan Internet Explorer pra-HTML5 versi 6 hingga 8, yang tidak memiliki dukungan SVG. Namun, seperti yang saya pahami, Rapha hanya cocok untuk menghasilkan grafik yang sepenuhnya menggunakan JavaScript daripada bekerja dengan grafik yang sudah ada karena Rapha merupakan lapisan abstraksi di atas SVG. D3.js akan lebih cocok untuk aplikasi seperti milik Anda jika Anda tidak senang dengan DOM biasa (dan, sejujurnya, saya merasa tidak adil jika menyebutnya sebagai perpustakaan khusus SVG, karena itu lebih dari itu).
Anda dapat menggunakan onclick
dan atribut yang serupa serta DOM standar addEventListener ()
. Contoh yang sangat sederhana dalam menggunakan event JavaScript adalah menambahkan pendengar event ke elemen <svg>
yang melaporkan nama kota yang diklik pengguna:
document.getElementsByTagName("svg")[0]
.addEventListener("click",function(evt){
alert(evt.target.getAttribute("data-gemeente"))
},
false)
Catatan tambahan: Toopltips
Efek yang sama dengan yang Anda dapatkan dengan menggunakan atribut title
di HTML dapat dicapai dengan menggunakan elemen <title>
di SVG. Letakkan saja elemen <title>
di dalam elemen SVG dan pada saat melayang, Anda akan melihat tooltip dengan konten elemen <title>
.
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<rect width="100" height="100">
<title>test</title>
</rect>
</svg>