Jadikan Graf & Maklumat Syarikat Respon SVG Responsif Anda Sendiri

memanfaatkan kuasa SVG responsif: meningkatkan pengalaman pengguna melalui kawalan peringkat kod

Artikel ini meneroka cara membuat grafik vektor berskala yang lebih responsif dan mesra pengguna (SVGs) dengan terus memanipulasi markup mereka. Kami akan memanfaatkan editor teks dan panel HTML codepen.io untuk percubaan.

Meningkatkan kebersihan dan kecekapan SVG

Untuk SVGs yang lebih bersih, lebih padat, sifat -sifat inline yang diulang harus refactored ke dalam kelas CSS, mencerminkan amalan terbaik HTML. Ini meningkatkan kebolehbacaan, mengurangkan saiz fail, dan membolehkan pengurusan gaya berpusat. Sebagai contoh, pertimbangkan unsur -unsur

yang berulang -ulang: <text></text>

<text> y="430" x="40" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1960>
<text> y="430" x="118" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1965>
<text> y="430" x="196" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1970>

Ini boleh dipermudahkan menggunakan kelas CSS dalam bahagian

: <defs>

.y-axis text {
    text-anchor: middle;
    fill: rgb(103, 102, 102);
    font-size: 12px;
}

unsur -unsur

kemudian menjadi: <text>

<text class="y-axis" y="430" x="40">1960</text>
<text class="y-axis" y="430" x="118">1965</text>
<text class="y-axis" y="430" x="196">1970</text>

Pendekatan ini dengan ketara meningkatkan pemeliharaan kod dan mengurangkan saiz fail. Teknik yang sama boleh digunakan untuk elemen berulang yang lain.

Membuat SVG responsif dengan pertanyaan media CSS

memanfaatkan pertanyaan media CSS menjadikan SVGs responsif terhadap saiz skrin yang berbeza. Ini adalah penting untuk mengekalkan kebolehbacaan di pelbagai resolusi. Sebagai contoh, untuk menyesuaikan saiz fon berdasarkan lebar skrin:

@media (max-width: 500px) {
    .label-startrek, .label-starwars {
        font-size: 170%;
    }
    .y-axis text, .x-axis text {
        font-size: 130%;
    }
}

Ini memastikan teks tetap dibaca walaupun pada skrin yang lebih kecil. Penambahbaikan selanjutnya, seperti unsur -unsur bersembunyi yang menggunakan

atau display: none; dalam pertanyaan media, dapat meningkatkan susun atur dan kebolehbacaan pada titik putus yang lebih kecil. Pemilih opacity: 0; menyediakan pendekatan yang lebih elegan untuk mensasarkan unsur -unsur tertentu. :nth-of-type

melampaui respons asas

SVG responsif menyesuaikan diri bukan sahaja untuk saiz skrin tetapi juga ke kedudukan mereka dalam susun atur. Mereka boleh mengubah saiz secara dinamik untuk mengisi ruang yang ada, menjadikannya sesuai untuk elemen interaktif dan kandungan dinamik. Ini membolehkan untuk membuat lakaran kecil yang boleh disesuaikan atau carta interaktif yang menyesuaikan tahap terperinci mereka berdasarkan ruang yang ada.

Kesimpulan

Dengan memeluk kawalan peringkat kod dan menggunakan teknik CSS, SVGs dapat diubah menjadi komponen yang sangat responsif dan mesra pengguna. Eksperimen dengan codepen.io dan editor teks adalah cara yang kuat untuk meneroka teknik -teknik ini dan membuat grafik yang dinamik dan boleh disesuaikan. Ingatlah untuk memasukkan CSS terakhir anda dalam bahagian SVG

untuk fail yang boleh dikekalkan sendiri.

Atas ialah kandungan terperinci Jadikan Graf & Maklumat Syarikat Respon SVG Responsif Anda Sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!