Отображение файлов SVG друг над другом в HTML

Question

Можно ли добавить значки 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>

Answer 1

Как уже упоминалось в ответе Lau , если вы настаиваете на использовании <object> -элементов, вы можете наложить их, используя позиционирование 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>

Answer 2

Вы можете использовать абсолютное позиционирование , чтобы поставить друг на друга. Дополнительный совет! абсолютные элементы относятся к ближайшему родительскому элементу с position:relative, так что вы можете использовать его, чтобы они не летали по всей странице.