Форум

ioprst_ · #1 (**permalink**) 08.06.2018, 12:28

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

<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"/>
    <rect y="26" x="11" height="12" width="2" id="c0flow1"/>
    <rect y="26" x="19" height="12" width="2" id="c0flow2"/>
    <rect y="26" x="27" height="12" width="2" id="c0flow3"/>
    <rect y="26" x="35" height="12" width="2" id="c0flow4"/>
    <rect y="26" x="43" height="12" width="2" id="c0flow5"/>
    <rect y="26" x="51" height="12" width="2" id="c0flow6"/>
    <rect y="26" x="59" height="12" width="2" id="c0flow7"/>
  </g>
  </g>
<!-- тут еще 15 групп с 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"/>
    <rect y="26" x="11" height="12" width="2" id="c15flow1"/>
    <rect y="26" x="19" height="12" width="2" id="c15flow2"/>
    <rect y="26" x="27" height="12" width="2" id="c15flow3"/>
    <rect y="26" x="35" height="12" width="2" id="c15flow4"/>
    <rect y="26" x="43" height="12" width="2" id="c15flow5"/>
    <rect y="26" x="51" height="12" width="2" id="c15flow6"/>
    <rect y="26" x="59" height="12" width="2" id="c15flow7"/>
  </g>
  </g>
</g>
</svg>

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

<!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> так, чтобы вниз страница не прокручивалась.

рони · #2 (**permalink**) 08.06.2018, 14:09

ioprst_,
рыть в эту сторону, может кто-то подскажет ещё ...

document.addEventListener('DOMContentLoaded', function () {
            var svgDoc = document.getElementById("AutoId");
            var parentTop = svgDoc.getBoundingClientRect().top;
            var height = document.documentElement.clientHeight-parentTop - 12, width = document.documentElement.clientWidth-10;

            svgDoc.addEventListener('load', function () {
                var svg = svgDoc.contentDocument.querySelector("svg");
                svg.setAttribute("height", height+"px");
                svg.setAttribute("width", width+"px");
                var g = svgDoc.contentDocument.querySelector(".default_default:last-child");
                g.setAttribute("transform", "translate(" +(width - 70)+","+(height-44)+") rotate(0,32,32)");
            });
        });

Malleys · #3 (**permalink**) 08.06.2018, 15:55

Можно обойтись только стилями

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style>

	html, body, .menu {
		height: 100%;
		box-sizing: border-box;
		margin: 0;
	}

	.menu {
		display: flex;
		flex-direction: column;
	}

	.menu > img {
		min-height: 0;
	}

	</style>
</head>
<body>
	<div class="menu">
		<a href="Auto.html">Untitled</a>
		<img src="Auto.svg">
	</div>
</body>
</html>

Поменял тег object на img. У вас ведь картинка!

ioprst_ · #4 (**permalink**) 09.06.2018, 10:59

Malleys, не картинка, объект, который будет изменяться в зависимости от поступающих данных (анимация и т.п.).

Форум

Справочник

Discord чат

Курсы javascript