Масштабирование объекта SVG

@ioprst · Регистрация: 12.03.2018

Студворк — интернет-сервис помощи студентам

Привет. Подскажите как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" вниз. Например у меня есть svg (большой код, т.к. в ней просто 17 одинаковых элементов, которые расположены по главной горизонтали):

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="1088px" style="background:#FFFFFF" version="1.1" width="1088px">
  <defs>
    <style type="text/css">
        .default_default {
          fill: #E4801B;
          stroke: #000000;
          stroke-width: 1.0px;
        }
    </style>
  </defs>
  <g id="root" transform="translate(0,0)">
  <g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)">
  <g id="layer0">
    <rect y="24" x="0" height="16" width="64" id="c0trumpet"/>
    <rect y="26" x="3" height="12" width="2" id="c0flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="11" height="12" width="2" id="c0flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="19" height="12" width="2" id="c0flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="27" height="12" width="2" id="c0flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="35" height="12" width="2" id="c0flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="43" height="12" width="2" id="c0flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="51" height="12" width="2" id="c0flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="59" height="12" width="2" id="c0flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
  </g>
  </g>
<g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)">
  <g id="layer0">
    <rect y="24" x="0" height="16" width="64" id="c1trumpet"/>
    <rect y="26" x="3" height="12" width="2" id="c1flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="11" height="12" width="2" id="c1flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="19" height="12" width="2" id="c1flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="27" height="12" width="2" id="c1flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="35" height="12" width="2" id="c1flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="43" height="12" width="2" id="c1flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="51" height="12" width="2" id="c1flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="59" height="12" width="2" id="c1flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
  </g>
  </g>
<!-- тут еще 14 групп с id="Auto"-->
<g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)">
  <g id="layer0">
    <rect y="24" x="0" height="16" width="64" id="c15trumpet"/>
    <rect y="26" x="3" height="12" width="2" id="c15flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="11" height="12" width="2" id="c15flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="19" height="12" width="2" id="c15flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="27" height="12" width="2" id="c15flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="35" height="12" width="2" id="c15flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="43" height="12" width="2" id="c15flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="51" height="12" width="2" id="c15flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    <rect y="26" x="59" height="12" width="2" id="c15flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
  </g>
  </g>
</g>
</svg>

Auto.html выглядит следующим образом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="menu">
        <a href="Auto.html">Untitled</a>
        <div>
            <object id="AutoId" type="image/svg+xml" data="Auto.svg"></object>
        </div>
        <script type="text/javascript" src="Auto.js"></script>
    </div>
</body>
</html>

Таким образом я получаю страницу, которая представлена на рисунке 1. Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.

@ioprst · 15.06.2018, 14:18 **[ТС]**

Возможно кому-то пригодится.
Шапка svg:

XML
1
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%" viewBox="0 0 1088 1088" preserveAspectRatio="xMinYMin meet" style="background:#31C184">

Код HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>testPrj</title>
    <style>
        body, html {width: 100%; height: 100%; margin: 0; padding: 0}
        .row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
        .first-row {display: table-row; overflow: auto;}
        .second-row {display: table-row; height: 100%; overflow: hidden }
        .second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
    </style>
</head>
<body bgcolor="#0974F7">
    <div class="row-container">
        <div class="first-row">
            <h1>test</h1>
            <button onclick='location.href="Auto.html"'>Auto</button>
        </div>
        <div class="second-row">
            <iframe frameborder="0" marginwidth="0" marginheight="0" width="100%" height="100%" src="Auto.svg" id="AutoId"></iframe> 
        </div>
    </div>
    <script type="text/javascript" src="Auto.js"></script>
</body>
</html>

@ioprst · 20.06.2018, 15:43 **[ТС]**

А вот решение еще лучше (для меня).
SVG шапка:

XML
1
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="100%" style="background:#31C184" version="1.1" viewBox="0 0 1088 1088" width="100%">

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>testPrj</title>
    <style>
        .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 iframe {
          width: 100%;
          height: 100%;
          border: none;
          margin: 0;
          padding: 0;
          display: block;
        }
 
        .footer {
          display: table-row;
          height:1px;
        }
 
        /* Basic Style*/
        * { margin:0; padding:0;}
        html, body {
          height: 100%;
        }
    </style>
</head>
<body bgcolor="#ffff00">
    <div class="wrapper">
      <div class="header">
        <h1>Header</h1>
        <button onclick='location.href="Auto.html"'>Auto</button>
        <button onclick='location.href="Auto1.html"'>Auto1</button>
      </div>
 
      <div class="main">
        <div class="horizontalbar"></div>
        <div class="box sidebar"></div>
        <div class="box content">
          <iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>
        </div>
        <div class="box sidebar"></div>
        <div class="horizontalbar"></div>
      </div>
      <div class="footer">Text. Text</div>
    </div>
    <script type="text/javascript" src="Auto.js"></script>
</body>
</html>

JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.onload = function() {
    svgDoc = document.getElementById("AutoId").contentDocument;
    var timer = setInterval(anim, 100);
    var timerPost = setInterval(setPost, 100);
    initClick();
    updateSize();
}
 
window.onresize = updateSize;
 
function updateSize() {
    vpW = document.getElementsByClassName('main')[0].clientWidth;
    vpH = document.getElementsByClassName('main')[0].clientHeight;
    //imgW = document.getElementsByClassName('box content')[0].clientWidth;
    //imgH = document.getElementsByClassName('box content')[0].clientHeight;
    imgW = 1088; // size svg
    imgH = 1088; // size svg
    //alert(vpW + ':' + vpH + ' = ' + vpW/vpH + '      ' + imgW + ':' + imgH + ' = ' + imgW/imgH);
 
    if(vpW/vpH < imgW/imgH) {
        for(var i = 0; i < 2; i++) {
            document.getElementsByClassName('horizontalbar')[i].style.height = (vpH - vpW)/2 + 'px';
            document.getElementsByClassName('box sidebar')[i].style.width = '0px';
        }
    } else {
        for(var i = 0; i < 2; i++) {
            document.getElementsByClassName('box sidebar')[i].style.width = (vpW - vpH)/2 + 'px';
            //document.getElementsByClassName('horizontalbar')[i].style.height = '0px'
        }
    }
}

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .