Добавление SVG с помощью object и iframe. Разное поведение в разных браузерах

Question

Необходимо добавить SVG документ с не фиксированным размером на страницу так, чтобы он занимал все свободное пространство. Масштабирование должно происходить с сохранением соотношения сторон.

Есть два способа: object, iframe.

Позиционирование и масштабирование SVG получил с помощью табличной верстки (если кто-то предложит другое (лучше) решение, буду признателен).

<svg xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg" baseProfile="full"
     height="100%" version="1.1" viewBox="0 0 768 576" width="100%">
  <rect fill="#FFFF00" height="576" stroke="none" width="768"/>
  <g id="root" transform="translate(0,0)">
    <text font-size="200" x="75" y="350">_SVG_</text>
  </g>
</svg>

* {
    margin:0;
    padding:0;
}

html, body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
}

.header {
  display: table-row;
  height: 1px;
}

.main {
  height: 100%;
  display: table;
  width: 100%;
}

.horizontalbar {
  display: table-row;
  height: 0px;
}

.box {
  display: table-cell;
}

.sidebar {
  width: 0px;
}

.content {
  height: 100%;
}

.content object {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.content iframe {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.footer {
  display: table-row;
  height:1px;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body bgcolor="#FFFFFF">
    <div class="wrapper">
        <header class="header">
            <p style="text-align: center">Header</p>
        </header>
        <div style="width: 100%; height: 1px; background-color: black"></div>
        <main class="main">
            <div class="horizontalbar"></div>
            <div class="box sidebar"></div>
            <div class="box content">
                <iframe frameborder="0" marginwidth="0" marginheight="0" src="svg.svg" id="svg"></iframe>
                <!--<object data="svg.svg" type="image/svg+xml" id="svg" width="100%" height="100%"></object>-->
            </div>
            <div class="box sidebar"></div>
            <div class="horizontalbar"></div>
        </main>
        <div style="width: 100%; height: 1px; background-color: black"></div>

        <footer class="footer">
            <p style="text-align: center">Footer</p>
        </footer>

    </div>

</body>
</html>

В Google Chrome варианты с object и iframe работают одинаково:

В Firefox вариант с iframe работает нормально, а с object получаю следующий результат:

Видно, что появилась полоса прокрутки (пропал footer).

Как это можно исправить?

Answer 1

Попробуйте заменить проценты в шапке SVG файла на относительные для окна браузера единицы width="100vw" height="100vh"

И попробуйте добавить preserveAspectRatio="xMinYMin meet" Это гарантированно привяжет SVG к верхнему левому углу.

В крайнем случае попытайтесь уменьшить немного проценты height="95vh"

Либо указать только ширину width="100vw" без указания высоты.

В общем надо искать компромиссный вариант, где будет выглядеть одинаково

<svg xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg" baseProfile="full"
     height="100vh" version="1.1" viewBox="0 0 768 576" width="100vw" preserveAspectRatio="xMinYMin meet">
  <rect fill="#FFFF00" height="576" stroke="none" width="768"/>
  <g id="root" transform="translate(0,0)">
    <text font-size="200" x="75" y="350">_SVG_</text>
  </g>
</svg>

БЛОГ НА HUSL

Добавление SVG с помощью object и iframe. Разное поведение в разных браузерах

Ответы (1 шт):