在html中相互显示svg文件答案

【问题标题】：Showing svg files over each others in html在html中相互显示svg文件
【发布时间】：2018-10-20 23:24:07
【问题描述】：

是否可以在另一个 svg 文件上添加 svg 图标，例如文件，我正在为我的 html 代码使用一个简单的对象标签，我想知道是否可以在已经显示的文件上添加更多 svg 文件

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

【问题讨论】：

你必须像任何其他叠加层一样定位它们。
是否可以将它们定位在第一个 svg 文件中的某个位置，该文件拥有自己的唯一 ID？
我怀疑...我认为这是使用object 标签的缺点。如果您使用实际的 SVG，它有自己的视图框，您可以在其中包含其他 SVG 元素，
是的，有一个实际的 svg，它有自己的元素，甚至每个元素都有自己的唯一 ID，它们在 XML 中而不是 html 这就是为什么我有点困惑，我想定位其他 svg 元素在已经存在的元素之上

标签： javascript html css svg

【解决方案1】：

您可以使用absolute positioning 将一个放在一起。额外提示！绝对项与 position:relative 最接近的父项相对，因此您可以使用它来避免它们在整个页面上飞来飞去。

【讨论】：

【解决方案2】：

正如the answer by Lau中提到的，如果你坚持使用<object>-elements，你可以使用CSS定位覆盖它们，

.combined {
  display: inline-block;
  position: relative;
}
.combined > :first-child ~ * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class=combined>
	<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" type="image/svg+xml"></object>
	<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" type="image/svg+xml"></object>
</div>

示例中的 CSS 确保包装元素 (<div class=comined>) 占据第一个对象的尺寸并覆盖所有其他元素。

还有一个更好的选择，使用 SVG 来组合其他 SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="0 0 50 50">
	<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" />
	<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" />
</svg>

【讨论】：