Bagaimanakah Saya Boleh Menggayakan SVG Terbenam Menggunakan Teg ``?

Menggunakan Gaya pada SVG Terbenam

Tidak seperti SVG yang disertakan secara langsung melalui

Penjelasan Teknikal

Lembaran gaya hanya digunakan dalam sempadan dokumen yang ditakrifkan. SVG terbenam dianggap berasingan dokumen, dan oleh itu, gaya yang ditakrifkan secara luaran tidak boleh menjejaskan mereka.

Penyelesaian: Sisipan Gaya berasaskan skrip

Sejak tag menyediakan akses kepada dokumen SVG terbenam, anda boleh memasukkan elemen gaya secara pemrograman ke dalam dokumen terbenam. Berikut ialah contoh:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

Ini mengandaikan bahawa elemen telah dimuatkan sepenuhnya sebelum menjalankan skrip.

Pendekatan Alternatif

• Sertakan Lembaran Gaya dalam SVG: Pautan ke lembaran gaya luaran dari dalam fail SVG menggunakan arahan pemprosesan ?xml-stylesheet atau elemen dalam bahagian.
• Gunakan Pemalam jQuery-SVG: Gunakan pemalam jQuery-SVG untuk menggunakan gaya JavaScript dan CSS pada SVG terbenam.

CSS Langsung Penyasaran

Jika SVG terbenam disimpan dalam fail berasingan, anda boleh menentukan gaya CSS yang menyasarkan elemen itu sendiri, seperti:

object[data="my-embedded-svg.svg"] {
  fill: #fff;
}

Pendekatan ini tidak menggunakan gaya pada SVG itu sendiri, tetapi ia boleh berguna untuk melaraskan penampilan keseluruhan elemen terbenam.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan SVG Terbenam Menggunakan Teg ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!