Apa yang svg lakukan dalam javascript?

Dalam JavaScript, svg merujuk kepada grafik vektor boleh skala, iaitu format grafik berdasarkan XML untuk menerangkan grafik vektor dua dimensi "svg.js" ialah perpustakaan JavaScript ringan yang boleh mengendalikan svg dan mentakrifkan animasi.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Apakah yang svg lakukan dalam javascript?

Apakah itu SVG?

SVG bermaksud Grafik Vektor Boleh Skala

SVG digunakan untuk mentakrif grafik berasaskan vektor untuk web

SVG menggunakan format XML untuk mentakrifkan grafik

Imej SVG tidak kehilangan kualiti grafik apabila dibesarkan atau diubah saiz

SVG ialah piawaian World Wide Web Consortium

SVG serasi dengan perkara seperti DOM dan XSL Standard W3C adalah keseluruhan

Pengenalan:

SVG.js ialah perpustakaan JavaScript ringan yang membolehkan anda memanipulasi SVG dan mentakrifkan animasi dengan mudah.

SVG (Grafik Vektor Boleh Skala) ialah format grafik berdasarkan XML yang digunakan untuk menerangkan grafik vektor dua dimensi. SVG dibangunkan oleh W3C dan merupakan standard terbuka.

SVG.js mengandungi sejumlah besar kaedah untuk mentakrifkan animasi, seperti pergerakan, penskalaan, putaran, kecondongan, dll. Untuk butiran, sila rujuk tunjuk cara yang berkaitan.

•Sintaks yang mudah dibaca dan ringkas

•Versi mampat gzip yang sangat ringan hanya 5k

•Elemen animasi untuk saiz, kedudukan, warna, dll.

•Struktur modular, pengembangan mudah

•Pelbagai pemalam praktikal

•API seragam antara pelbagai jenis bentuk.

•Elemen boleh diikat pada acara, Sentuh acara disertakan

• Sokongan penuh untuk topeng kelegapan

• Kumpulan elemen

• Kecerunan dinamik

• Mod isian

• Lengkap Dokumentasi

Cipta dokumen SVG

Gunakan fungsi SVG() untuk mencipta dokumen SVG dalam elemen html tertentu:

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

The parameter dalam SVG() boleh menjadi id elemen atau elemen itu sendiri.

Dua ayat di atas akan menghasilkan kod berikut dalam dokumen html:

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

Sudah tentu, untuk menentukan saiz kanvas SVG, selain menggunakan piksel, anda juga boleh menggunakan peratusan. Seperti berikut:

var draw = SVG('canvas').size('100%', '100%')

Kesan sokongan penyemak imbas untuk SVG

Sebelum menggunakan svg.js, anda boleh menggunakan kod berikut untuk mengesan sokongan penyemak imbas untuk perpustakaan svg.js Situasi: Sifat-sifat

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

486d7a50595533609bc98d44595dc670 boleh ditentukan menggunakan kaedah viewbox() adalah seperti fungsi setter, seperti yang ditunjukkan di bawah:

draw.viewbox(0,0,297,210)

Baris kod di atas adalah bersamaan dengan baris kod berikut Dua parameter pertama mewakili kedudukan 486d7a50595533609bc98d44595dc670, dan dua yang terakhir ialah lebar dan tingginya.

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

Jika tiada parameter, kotak pandangan akan terus mengembalikan 486d7a50595533609bc98d44595dc670:

var box = draw.viewbox()

Kaedah kotak pandangan() boleh mempunyai atribut zum,

var box = draw.viewbox() var zoom = box.zoom

Jika saiz 486d7a50595533609bc98d44595dc670 dalam kotak paparan adalah sama dengan kanvas SVG sebenar, maka nilai zum ialah 1.

Dokumen SVG

svg.js juga boleh berfungsi di luar htmlDOM, seperti yang ditunjukkan di bawah, ia ialah fail svg bebas, sama seperti fail js luaran.

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG(&#39;viewport&#39;) 
draw.rect(100,100).animate().fill(&#39;#f03&#39;).move(100,100) 
]]> 
</script> 
</svg>

Cadangan berkaitan: Tutorial pembelajaran javascript

Atas ialah kandungan terperinci Apa yang svg lakukan dalam javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!