同一页面内联SVG嵌入内联SVG问题：第二个LinkedIn图标不显示

问题根源 #

你的代码存在两个核心问题导致第二个LinkedIn图标无法正常显示：

• 第二个svg-icon容器中，<use>标签没有被<svg>元素包裹，<use>必须嵌套在<svg>内部才能正确引用页面中已定义的SVG元素
• HTML结构存在多余的闭合标签（比如第一个图标末尾的</a>、第二个图标里的</svg>和</a>），破坏了DOM结构的完整性

修复后的完整代码 #

CSS（保持原有逻辑不变） #

body {  transition: all .3s ease; }

/* Set icon size */
.svg-icon svg {
  width: 50px;
  height: 50px;
  color: white;
}

.svg-icon svg > g rect {
  fill: gray;
}
.svg-icon svg > g circle {
  fill: gray;
}

.svg-background {
  opacity: 0.3;
}
.svg-background:hover {
  opacity: 0.6;
}


/* Dark Mode Settings */
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #333;
  }
  p { color: #fff; }
  .color-scheme--light, .color-scheme--no-preference {
    display:none;
  }
  /* SVG Icons */
  .svg-icon svg {
    color: white;
  }
  /* Hover color */
  .svg-icon svg:hover g path {
    color: #D83933;
  } 
  .svg-icon svg:hover {
    fill: #D83933;
  } 
}

@media (prefers-color-scheme: light) {
  body {
    color: #333;
    background-color: #fff;
  }
   p { color: #000; }
  .color-scheme--dark, 
  .color-scheme--no-preference {
    display:none;
  }
  /* SVG Icons */
  .svg-icon svg {
    color: #1B1B1B;
  }
  /* Hover color */
  .svg-icon svg:hover g path {
    color: #A23737;
  } 
  .svg-icon svg:hover {
    fill: #A23737;
  } 
}
@media (prefers-color-scheme: no-preference) { 
  body {
    color: #333;
    background-color: #fff;
  }
   p { color: #000; }
  .color-scheme--light, 
  .color-scheme--dark {
    display:none;
  }
  /* SVG Icons */
  .svg-icon svg path {
    fill: #1B1B1B;
  } 
  /* Hover color */
  .svg-icon svg:hover g path {
    color: #A23737;
  } 
  .svg-icon svg:hover {
    fill: #A23737;
  } 
}

/* Hide visually */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

修正后的HTML #

<span class="svg-icon">
  <span class="visually-hidden">LinkedIn</span>
  <svg id="linkedin-svg" xmlns="http://www.w3.org/2000/svg" width="64" height="64" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640" aria-hidden="true">
    <g class="svg-background">
      <circle cx="50%" cy="50%" r="50%" />
      <rect width="100%" height="100%" ry="150" rx="150" />
    </g>
    <g transform="scale(0.65, 0.65)">
      <path fill="currentColor" transform="translate(160, 160)" d="M228.582 205.715h126.462v64.832h1.83c17.611-31.595 60.675-64.832 124.892-64.832C615.303 205.715 640 288.818 640 396.926v220.219H508.116V421.93c0-46.536-.969-106.442-68.576-106.442-68.67 0-79.194 50.658-79.194 103.052v198.605H228.581v-411.43zM137.152 91.43c0 37.855-30.721 68.576-68.576 68.576-37.855 0-68.587-30.721-68.587-68.576 0-37.855 30.732-68.576 68.587-68.576 37.855 0 68.576 30.721 68.576 68.576zM-.011 205.715h137.163v411.43H-.011v-411.43z" />
    </g>
  </svg>
</span>

<br /><br /><br /><br />

<span class="svg-icon">
  <span class="visually-hidden">LinkedIn</span>
  <svg width="64" height="64" aria-hidden="true">
    <use href="#linkedin-svg" />
  </svg>
</span>

关键修正说明 #

1. 为第二个图标添加了完整的<svg>标签包裹<use>，并设置了与第一个图标一致的宽高属性，保证显示尺寸匹配
2. 移除了所有多余的闭合标签，修复了DOM结构错误
3. 给第二个图标补充了visually-hidden辅助文本，确保无障碍访问性

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