У меня есть небольшой HTML файл со встроенным объектом SVG. В настоящее время отображаемый SVG довольно велик, и пользователю необходимо уменьшить масштаб, чтобы увидеть его полностью. Я хочу сделать так, чтобы 100% SVG масштабировалось в родительском div, но у меня проблемы с этим через CSS. Кроме того, я пытаюсь найти способ сделать это без необходимости редактировать сам файл SVG, и, надеюсь, я мог бы переключаться между любыми файлами SVG, и он масштабировался бы одинаково.
В качестве примера, вот небольшие куски реальных файлов, с которыми я работаю:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<title>OMIX Map</title>
</head>
<body>
<h1>OMIX MAP</h1>
<div id="map">
<object id="map-svg" type="image/svg+xml" data="images/map.svg" onload="loadSVG()"></object>
</div>
</body>
</html>
SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:omix="http://www.omix.bio/xsd/omixsvg" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="tiny" height="2541" version="1.2" width="2298" xmlns="http://www.w3.org/2000/svg">
<title>Network 'Homo sapiens'</title>
<desc>Created with Omix</desc>
<defs>
<clipPath id="clipPath1">
<path d="M0,0 L2298.591,0 L2298.591,2541.682 L0,2541.682 L0,0"/>
</clipPath>
</defs>
<g clip-path="url(#clipPath1)" fill="none" fill-rule="evenodd" font-family="Helvetica" font-size="7.5px" font-style="normal" font-weight="400" id="ID3f9bfff0" stroke="#000000" stroke-linecap="square" stroke-linejoin="bevel" stroke-opacity="1" stroke-width="1">
<g class="Metabolite" id="Metabolite$NADH$3" name="NADH" omix:clone="3">
<g class="Shape" id="Shape_of_Metabolite$NADH$3">
<path d="M-30,-15 C-30,-17.761 -27.851,-20 -25.2,-20 L25.2,-20 C27.851,-20 30,-17.761 30,-15 L30,15 C30,17.761 27.851,20 25.2,20 L-25.2,20 C-27.851,20 -30,17.761 -30,15 L-30,-15" fill="#a28dff" fill-opacity="1" fill-rule="evenodd" id="ID3f089e5e" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" stroke-width="1" transform="matrix(1.0,0.0,0.0,1.0,1206.0929206118517,898.2429901388446)" vector-effect="none"/>
</g>
<g class="Label" id="Label_of_Metabolite$NADH$3">
<text fill="#000000" fill-opacity="1" font-family="Helvetica" font-size="18px" font-style="normal" font-weight="700" id="ID4037e797" stroke="none" transform="matrix(1.0,0.0,0.0,1.0,1173.6866706118517,883.2429901388446)" x="4.812" xml:space="preserve" y="22">NADH</text>
</g>
</g>
</g>
</svg>
CSS:
#map {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
#map-svg {
height: 100%;
width: 100%;
}