В общем,суть вопроса. Делаю интерактивную картинку с помощью SVG,всё бы ничего,выглядит классно,работает клёво,НО! При масштабировании всё съезжает.Даже если делать положение элемента в процентах (бяда!).Помогите,как исправить эту ситуацию?
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Интерактивная карта</title>
<meta name="description" content="">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/media.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel = 'stylesheet' href = 'style.css'>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="map">
<svg viewBox="0 0 1140 800">
<a href="#">
<path class="part" d="m 457.22244,98.885648 c 32.52252,66.957192 38.73863,153.400622 28.16442,252.281322 l 137.22665,-5.39319 c 5.33727,-80.01803 6.81847,-159.82184 -44.34398,-236.701 z" fill="#bf2523" description-data="<img src='media/2.jpg'> Реберная часть (толстый край) — первосортное мясо, в цельном виде состоит из 13 ребер">
</a>
<a href="#">
<path class="part" d="m 578.26953,109.07278 c 44.33189,69.33986 54.25203,149.81293 44.34398,236.701 l 152.80698,-0.59924 C 772.7733,261.24635 769.87608,177.39629 717.29391,109.07278 Z" fill="#bf2523" description-data="<img src='media/1.jpg'> Филей (поясничная часть, тонкий край). Этот отруб содержит нежное и очень постное мясо.">
</a>
</svg>
<div class="description">
</div>
<img src="https://s8.hostingkartinok.com/uploads/images/2019/10/667cca51ff79a7a05724107534ff1638.jpg" alt="">
</div>
<!--[if lt IE 9]>
<script src="libs/html5shiv/es5-shim.min.js"></script>
<script src="libs/html5shiv/html5shiv.min.js"></script>
<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
<script src="libs/respond/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
.map {
position:relative;
text-align:center;
top:0;
left:0;
}
svg {
position:absolute;
left:0.3%;
top:-0.3%;
height:100%;
width:100%;
}
(Да,там изначально изображение съехавшее,но это из-за масштабирования со стороны хостинга картинок,на который я залил это,чтобы вы могли посмотреть,в чём может быть причина)
Простой
