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 コンポーネントを使用している場合は、スタイル タグをコンポーネントに追加して、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 を表示できない場合は、SVG を正しくインポートして使用していることを確認し、コンソールに次のエラーがあるかどうかを確認してください。

error: 'svgicon' is not defined

上記の解決策でほとんどの問題が解決されるはずです。 Vue 使用時、SVG が表示されない問題。それでも問題が解決できない場合は、次の方法で他の解決策を探すことができます。

1. SVG アイコンが破損していないか確認します。
2. ブラウザがSVG形式をサポートしているかどうかを確認してください。
3. アプリケーションまたはブラウザを再起動します。

つまり、Vue アプリケーションで SVG アイコンを使用するときに問題が発生した場合は、上記の解決策を試すか、Vue アプリケーションの他のコンポーネントが SVG アイコンの表示に影響を与えるかどうかを確認できます。

以上がvueのsvgが表示されないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。