vue的svg不顯示

前端開發中，Vue 元件開發經常會用到 SVG 圖標，但是有時我們在應用程式中運用 SVG 時會出現不顯示的問題。

這樣的問題可能的原因很多，下面我們分析可能的問題和解決方法。

問題1: SVG 路徑錯誤

首先，檢查路徑是否有誤。有時，由於檔案路徑錯誤，SVG 圖示並不能正確載入。在這種情況下，可以透過檢查開發者工具或控制台，來查看瀏覽器的 404 個錯誤訊息。

如果發現 SVG 路徑錯誤，可以透過修改路徑或使用絕對路徑來解決。

問題2: SVG 尺寸錯誤

當 SVG 圖示尺寸被設定為 0，或 SVG 圖示被設定為隱藏，SVG 圖示將不會顯示。

因此，確保SVG 圖示尺寸合適且正確顯示，可以透過以下程式碼來設定SVG 圖示預設尺寸：

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

問題3: SVG 填滿色錯誤

有時，我們在應用程式中使用SVG 圖示時會發現，SVG 圖示雖然顯示出來了，但是填充色是錯誤的。這種問題通常是由於 SVG 預設顏色或 Vue 元件樣式的問題所引起的。

在處理這類問題時，可以透過使用 fill 屬性來解決。如果你使用的是 Vue 元件，可以在元件中加入 style 標籤，來覆蓋 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>

問題4: SVG 元件未正確引入

在 Vue 應用程式中，如果你使用的是 SVG 元件，則需要在每個使用這個元件的地方引入這個元件。

你可以使用import 對SVG 元件進行全域引入或局部引入，如果您使用的是vue-svgicon，請新增如下配置，來確保SVG元件被正確引入:

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

如果您仍然無法顯示SVG，請確保自己的import 和使用正確，並且在控制台中查看是否有以下錯誤：

error: 'svgicon' is not defined

以上解決方法應該可以解決大部分使用Vue 運用時SVG 不顯示的問題。如果您的問題仍無法解決，可以透過以下方式尋求其他解決方案：

1. 檢查 SVG 圖示是否損壞。
2. 檢查瀏覽器是否支援 SVG 格式。
3. 重啟應用程式或瀏覽器。

總之，如果您在 Vue 應用程式中使用 SVG 圖示時遇到了問題，可以嘗試以上解決方法，或查看 Vue 應用程式中其他元件是否影響了 SVG 圖示的顯示。

以上是vue的svg不顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！