vue的svg不显示如何搞定

发布时间：2023-10-18 11:30:17 所属栏目：教程来源：互联网

导读： 　　本篇内容介绍了“vue的svg不显示如何解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔

　　本篇内容介绍了“vue的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 不显示的问题。如果您的问题仍不能得到解决，可以通过以下方式寻求其他解决方案：

　　检查 SVG 图标是否损坏。

　　检查浏览器是否支持 SVG 格式。

　　重启应用程序或浏览器。

　　总之，如果您在 Vue 应用中使用 SVG 图标时遇到了问题，可以尝试以上解决方法，或者查看 Vue 应用中其他组件是否影响了 SVG 图标的显示。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!