同一页面放置多个SVG异常：消失及颜色变更问题求助

我碰到过好多次这种多SVG同页显示冲突的问题，你说的第一个SVG空白的情况，十有八九是样式冲突搞的鬼——特别是第二个SVG的style标签里用了全局选择器（比如直接写path { ... }）或者重复的类名，把第一个SVG的样式给覆盖了，导致它的填充/描边失效，看起来就成空白了。下面给你几个靠谱的解决办法：

1. 给每个SVG的样式加独立前缀，隔离作用域 #

给每个SVG内部的类名加上专属前缀，确保样式只作用于当前SVG里的元素，不会影响其他SVG。比如第一个用icon-home-前缀，第二个用icon-settings-：

<!-- 第一个SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <style>
    .icon-home-path { fill: #2d3748; }
  </style>
  <path class="icon-home-path" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

<!-- 第二个SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <style>
    .icon-settings-circle { stroke: #4a5568; }
    .icon-settings-path { fill: #2d3748; }
  </style>
  <circle class="icon-settings-circle" cx="12" cy="12" r="10"/>
  <path class="icon-settings-path" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

2. 用内联样式替代style标签 #

如果SVG结构不复杂，直接把样式写在元素的style属性里，完全避免样式冲突的问题：

<!-- 第一个SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path style="fill: #2d3748;" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

<!-- 第二个SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <circle style="stroke: #4a5568;" cx="12" cy="12" r="10"/>
  <path style="fill: #2d3748;" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

3. 用<defs>+唯一ID隔离样式 #

把每个SVG的样式放在自己的<defs>标签里，并且给元素和样式选择器用唯一的ID，确保样式只作用于当前SVG：

<!-- 第一个SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <style>
      #home-path { fill: #2d3748; }
    </style>
  </defs>
  <path id="home-path" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

<!-- 第二个SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <style>
      #settings-circle { stroke: #4a5568; }
      #settings-path { fill: #2d3748; }
    </style>
  </defs>
  <circle id="settings-circle" cx="12" cy="12" r="10"/>
  <path id="settings-path" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

另外你可以先检查下第二个SVG的style标签里有没有类似path { fill: transparent; }或者* { ... }这种全局选择器，这类选择器会把页面上所有对应元素的样式都改掉，这也是第一个SVG空白的常见原因。

内容的提问来源于stack exchange，提问作者KevinM