Berbagai cara untuk memasukkan halaman HTML ke dalam SVG

SVG (grafik vektor yang dapat diskalakan) adalah format gambar vektor yang dapat diskalakan berdasarkan sintaks XML. Format gambar lainnya didasarkan pada pemrosesan piksel, sedangkan SVG adalah deskripsi bentuk gambar, sehingga pada dasarnya adalah file teks, dengan ukuran yang relatif kecil dan tidak akan terdistorsi saat diperbesar.

Masukkan tag SVG

Gunakan tag <svg> untuk memasukkan konten ke halaman web secara langsung, menjadi bagian dari DOM, dan kemudian Anda dapat menggunakan CSS dan JS untuk kontrol.

Lingkaran sederhana:

 <SVG Lebar = 400 heihgt = 300 id = testsvg> <lingkaran cx = 100 cy = 100 r = 50 fill = stroke merah = black stroke-width = 2 id = testcircle> </cingkaran> </svg> // dapat menggunakan css untuk mengontrol svg, tetapi atributnya berbeda dari gaya web {gaya svg = #ccc;} #testsvg Circle {fill: red; Stroke: biru; Stroke-lebar: 3; } </tyle> // Anda dapat menggunakan JS untuk mengoperasikan SVG, membuat animasi sederhana, dll. <Tipe skrip = teks/javascript> var circle = document.getElementById (testcircle); Circle.AddeventListener (klik, fungsi (e) {console.log (klik lingkaran ...); Circle.setAttribute (r, 65);}, false); </script> // Selain menggunakan JS, Anda dapat menggunakan svg sendiri. attributeName = cx dari = 100 hingga = 300 DUR = 2s REURTCOUNT = indefinite> </Any

Efek tampilan:

Masukkan file SVG

Anda dapat menggunakan <img> <embed> <object> <iframe> dan tag lainnya untuk memasukkan file SVG ke halaman web.

Kecuali untuk <img> , tag ganda harus digunakan.

 // Gunakan tag <img> <img src = test.svg '/> // atau pengkodean base64 dari svg <img src = data: gambar/svg+xml; base64, [data]/> GET <embed> tag <embed id = embedSVG type = gambar/svg+x mmg+xml+svg+svg+xml. Domvar embedsvg = document.getElementById (embedsvg) .getsvgdocument (); console.log (svg dom:, embedsvg); // gunakan tag <pesoption> <objek id = objectsvg type = gambar/svg+data xml = test.svg> </objectsvg document.getElementById (objekvg) .getsvgdocument (); console.log (svg dom:, objeksvg); // gunakan tag <frame> <iframe id = iframesvg src = test.svg> </iframe> // dapatkan SVG domvar iframesvg = document.geteLementById (iframesvg) .contentDocument; console.log (svg dom:, iframesvg);

Output SVG DOM:

Gunakan SVG sebagai gambar latar untuk elemen halaman web lainnya

Ini adalah cara yang menyamar untuk memasukkan SVG ke halaman web, yaitu, gunakan SVG sebagai gambar biasa dan tidak dapat menampilkan efek animasi.

 <type style = text/css> .svg-div {lebar: 400px; tinggi: 300px; latar belakang: url (test.svg) no-repeat center/50%; perbatasan: 1px solid #ccc;} </style> <div class = svg-div> </div>

Memengaruhi:

Baca kode sumber SVG

Karena file SVG pada dasarnya adalah bagian dari teks XML, kode sumber SVG dapat dibaca dengan membaca kode XML.

 var svgstr = xmlserializer baru (). SerializetoString (document.getElementById (testsvg)); console.log (svgstr);

Meringkaskan

Ini adalah akhir dari artikel ini tentang berbagai cara untuk memasukkan SVG pada halaman HTML. Untuk html yang lebih relevan, masukkan konten SVG, silakan cari artikel sebelumnya dari wulin.com atau lanjutkan menjelajahi artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!