css svg图片不显示不出来

最近有朋友反映在使用CSS来显示SVG图片时，图片总是不显示出来。这回导致了很多困扰，不知道该怎么解决这个问题。如果你也遇到了这样的情况，不要担心，本文将为大家介绍一些可能导致SVG图片不显示的原因和解决方法。

  
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <rect x="10" y="10" height="80" width="80" fill="#5294d5"/>
      <circle cx="50" cy="50" r="20" fill="#fff"/>
    </svg>
  

首先，你需要确认一下SVG代码是否正确。记住，在SVG代码中，每个元素都必须正确结束。如果你忘记了结束一个元素标签，那么你的SVG图片可能就无法正确显示。如果你需要贴里SVG代码，使用pre标签来确保整个SVG代码块显示正常。

第二种可能的原因是CSS属性导致SVG图片无法显示。你需要确保你的CSS属性正确地指定了SVG元素。如果你尝试使用CSS来格式化SVG图像，请确保在样式表中正确指定SVG元素。另外，即使你的CSS属性设置了正确，也有可能出现某个不兼容的浏览器或SVG文件本身不兼容的情况导致SVG图片无法正确显示。

最后，一些浏览器可能默认情况下不支持SVG图片，因此你需要设置一个降级选项。你可以在HTML中添加一条全局CSS样式，来帮助降级显示。你可以这样设置：

  
    img[src$=".svg"] {
      width: 100%;
      height: auto;
      content: url(/fallback.png);
    }
  

以上就是可能会导致CSS SVG图片不显示的几个原因和相应的解决方法。希望这篇文章可以帮助到你。