2

Необходимо добавить 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).

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

5
  • @MaximLensky, не помогло
    – ioprst
    4 фев 2020 в 12:12
  • @MaximLensky, да, как на первом изображении. Я понимаю, что скролл будет, если уменьшить размер окна до определенного размера, но, когда браузер развернут на весь экран, его быть не должно, т.к. header и footer не занимают много места.
    – ioprst
    4 фев 2020 в 12:45
  • @MaximLensky, Спасибо, но не то. Соотношение сторон не сохраняется (нужно убрать preserveAspectRatio='none'). Во-вторых, я хочу редактировать SVG средствами JS, а не вставить просто как фон.
    – ioprst
    4 фев 2020 в 12:59
  • svg.svg код этого файла добавьте ещё в вопрос, причина может быть там. Добавьте, посмотрим 4 фев 2020 в 15:17
  • 1
    @Alexandr_TT, в самом начале вопроса.
    – ioprst
    4 фев 2020 в 16:05

1 ответ 1

2

Попробуйте заменить проценты в шапке 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>

5
  • К сожалению, скролл в firefox так и остается с object.
    – ioprst
    5 фев 2020 в 5:35
  • @ioprst то есть ничего не помогло? Ни уменьшение высоты в относительных единицах - hight="95vh", ни другие комбинации параметров? 5 фев 2020 в 5:42
  • @ioprst попробуйте также в ваших стилях .content object { height: 100vh; 5 фев 2020 в 5:46
  • @Alexandr_TT, да, изменение в .content object height: 95vh помогло. Не сохраняется корректная работа при ресайзинге окна, как это было с iframe, но на полный экран работает. Спасибо!
    – ioprst
    5 фев 2020 в 5:57
  • @MaximLensky, нет, JS будет менять атрибуты SVG элементов: цвет, и т.д, вкл/выкл анимации. Размер SVG будет фиксирован, пока не будет загружен новый svg документ.
    – ioprst
    5 фев 2020 в 6:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.