在HTML中能否通过object标签实现SVG文件的叠加显示？

你有几种简单且实用的方法来把类文件的SVG图标叠加在现有SVG之上，结合你用<object>标签的场景，我给你拆解一下：

方法一：用CSS定位直接叠加多个<object>标签 #

这是最直接的方式，把所有需要叠加的SVG放在同一个相对定位的容器里，然后用绝对定位控制叠加层的位置。

<div style="position: relative; width: 1000px; height: 1000px;">
  <!-- 基础底图SVG -->
  <object id="baseSVG" data="worldHigh.svg" type="image/svg+xml" width="100%" height="100%">
    Your browser doesn't support this type of files
  </object>
  <!-- 叠加的图标SVG -->
  <object id="overlaySVG" data="your-icon.svg" type="image/svg+xml" width="50" height="50" style="position: absolute; top: 100px; left: 200px;">
    Your browser doesn't support this type of files
  </object>
</div>

• 外层的div设为position: relative，作为所有叠加元素的定位参考
• 基础SVG占满整个容器，叠加的SVG用position: absolute固定到你想要的位置（top和left可以按需调整）

方法二：内联SVG+直接插入叠加内容 #

如果能把基础SVG的代码直接内联到HTML里（而不是用<object>引用外部文件），灵活性会更高，你可以直接在基础SVG内部添加图标元素：

方式A：直接写入图标SVG代码 #

<svg id="baseSVG" width="1000" height="1000">
  <!-- 这里粘贴worldHigh.svg的全部代码 -->
  <g>...</g>
  <!-- 叠加的图标，通过x/y控制位置 -->
  <svg x="100" y="200" width="50" height="50">
    <!-- 粘贴你的图标SVG代码 -->
    <path d="M10 20..." />
  </svg>
</svg>

方式B：用<use>引用外部图标 #

如果图标是单独的SVG文件，可以用<use>标签直接引用（注意要确保图标SVG里定义了id）：

<svg id="baseSVG" width="1000" height="1000">
  <!-- 基础SVG内容 -->
  <g>...</g>
  <!-- 引用外部图标，x/y控制位置 -->
  <use href="your-icon.svg#icon-target-id" x="100" y="200" width="50" height="50" />
</svg>

这种方法的好处是可以直接修改SVG元素的样式、添加交互事件，比用<object>更灵活。

方法三：通过JavaScript动态添加叠加层 #

如果需要动态控制叠加内容（比如根据用户操作加载不同图标），可以等基础SVG加载完成后，通过JS操作它的文档对象来插入图标：

<object id="topOBJ" data="worldHigh.svg" type="image/svg+xml" width="1000" height="1000">
  Your browser doesn't support this type of files
</object>

<script>
  const baseObj = document.getElementById('topOBJ');
  // 等基础SVG加载完成后执行
  baseObj.onload = function() {
    const svgDoc = baseObj.contentDocument;
    if (!svgDoc) return;

    // 创建一个新的SVG容器用于放置图标
    const overlaySvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    overlaySvg.setAttribute('x', '100');
    overlaySvg.setAttribute('y', '200');
    overlaySvg.setAttribute('width', '50');
    overlaySvg.setAttribute('height', '50');

    // 加载外部图标SVG并插入到基础SVG中
    fetch('your-icon.svg')
      .then(res => res.text())
      .then(svgContent => {
        overlaySvg.innerHTML = svgContent;
        svgDoc.querySelector('svg').appendChild(overlaySvg);
      });
  };
</script>

总结 #

• 只是简单静态叠加？选方法一最省心
• 需要自定义样式或交互？优先考虑方法二
• 要动态控制叠加内容？用方法三更合适

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