svg vue tidak dipaparkan

Dalam pembangunan bahagian hadapan, ikon SVG sering digunakan dalam pembangunan komponen Vue, tetapi kadangkala apabila kita menggunakan SVG dalam aplikasi, akan ada masalah apabila ia tidak dipaparkan.

Terdapat banyak kemungkinan punca masalah sedemikian. Di bawah kami menganalisis kemungkinan masalah dan penyelesaian.

Masalah 1: Ralat laluan SVG

Mula-mula, semak sama ada laluan itu salah. Kadangkala, ikon SVG tidak dimuatkan dengan betul kerana laluan fail yang salah. Dalam kes ini, anda boleh melihat mesej ralat 404 penyemak imbas dengan menyemak alat pembangun atau konsol.

Jika anda menemui ralat laluan SVG, anda boleh menyelesaikannya dengan mengubah suai laluan atau menggunakan laluan mutlak.

Isu 2: Ralat saiz SVG

Apabila saiz ikon SVG ditetapkan kepada 0, atau ikon SVG ditetapkan kepada tersembunyi, ikon SVG tidak akan dipaparkan.

Oleh itu, untuk memastikan saiz ikon SVG sesuai dan dipaparkan dengan betul, anda boleh menetapkan saiz lalai ikon SVG melalui kod berikut:

svg {
  width: 1em;
  height: 1em;
}

Masalah 3: Warna isian SVG salah

Kadangkala, Apabila kami menggunakan ikon SVG dalam aplikasi, kami akan mendapati bahawa walaupun ikon SVG dipaparkan, warna isian adalah salah. Masalah ini biasanya disebabkan oleh masalah dengan warna lalai SVG atau gaya komponen Vue.

Apabila menangani masalah seperti ini, anda boleh menggunakan atribut isi untuk menyelesaikannya. Jika anda menggunakan komponen Vue, anda boleh menambah teg gaya pada komponen untuk mengatasi warna lalai SVG.

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon">
    <path fill="currentColor"
          d="M6.7 16.7L15.3 8 6.7 0 5 1.7l6.7 6.6-6.7 6.6z"/>
  </svg>
</template>

<style scoped>
svg {
  fill: red;
}
</style>

Masalah 4: Komponen SVG tidak diperkenalkan dengan betul

Dalam aplikasi Vue, jika anda menggunakan komponen SVG, anda perlu memperkenalkan komponen ini di setiap tempat di mana komponen ini digunakan.

Anda boleh menggunakan import untuk mengimport komponen SVG secara global atau tempatan Jika anda menggunakan vue-svgicon, sila tambah konfigurasi berikut untuk memastikan komponen SVG diimport dengan betul:

import Vue from 'vue';
import SvgIcon from 'vue-svgicon';
Vue.component('svg-icon', SvgIcon);

Jika anda masih tidak dapat memaparkan SVG, sila pastikan anda mengimport dan menggunakannya dengan betul, dan semak dalam konsol untuk ralat berikut:

error: 'svgicon' is not defined

Penyelesaian di atas sepatutnya menyelesaikan kebanyakan masalah di mana SVG tidak dipaparkan semasa menggunakan soalan Vue. Jika masalah anda masih tidak dapat diselesaikan, anda boleh mencari penyelesaian lain dengan:

1. Semak sama ada ikon SVG rosak.
2. Semak sama ada penyemak imbas menyokong format SVG.
3. Mulakan semula aplikasi atau penyemak imbas.

Ringkasnya, jika anda menghadapi masalah semasa menggunakan ikon SVG dalam aplikasi Vue, anda boleh mencuba penyelesaian di atas, atau semak sama ada komponen lain dalam aplikasi Vue menjejaskan paparan ikon SVG.

Atas ialah kandungan terperinci svg vue tidak dipaparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!