Помогите доработать кода на JS,Image map SVG адаптив

287
03 января 2019, 00:30

Я решаю проблему с изменением положением точек,когда картинка меняет свои размеры ,чтобы она была адаптивной. в примере только 1 элемент ареа(уже решение готово),а задача доработать так,чтобы кода была как можно меньше и он перебирал все элементы ареа,а не только связанный с Казахстаном. Можно выполнить большим повторным кодом,но это кастыли. Прошу прощения,но картинка типа SVG не добавляется сюда,качайте по ссылке. https://yadi.sk/d/oDozzORxHhrmUA

Чем можно заменить a[i]?

 a = [454,99,453,102,451,105,447,107,448,114,440,113,434,111,433,114,424,118,419,112,413,111,407,107,405,106,401,108,404,116,391,111,394,107,396,105,391,103,385,105,385,102,382,100,381,98,385,96,386,96,388,93,393,92,397,96,404,94,405,95,408,93,404,91,406,87,419,84,423,87,430,89,432,86,441,95,445,94,453,97,454,98,454,98]; 
function resizingMap(selector){ 
kaz = $(selector).attr('coords').split(","); 
var x = $(".mapppp").width() / 686; 
var y = $(".mapppp").height() / 367; 
for (var i = 0; i < kaz.length;) { 
	   				kaz[i] = a[i] * x; 
	   				i = i+2; 
				} 
	   			for (var i = 1; i < kaz.length;) { 
	   				kaz[i] = a[i] * y; 
	   				i = i+2; 
	   			} 
				kaz.join(","); 
				console.log(kaz); 
				$(selector).attr("coords", kaz); 
        } 
   	$( window ).resize( function(){ 
    resizingMap('#Kaz');});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> --> 
	<script 
  src="https://code.jquery.com/jquery-3.3.1.js" 
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 
  crossorigin="anonymous"></script> 
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
</head> 
<body> 
 
	<img src="cart.svg"  alt="Навигация по сайту" 
    usemap="#Navigation" width="686" class="mapppp" style="max-width: 100%"> 
 
   <map id="Navigation" name="Navigation"> 
 
    <area id="Kaz" shape="poly" class="area" 
    coords="454,99,453,102,451,105,447,107,448,114,440,113,434,111,433,114,424,118,419,112,413,111,407,107,405,106,401,108,404,116,391,111,394,107,396,105,391,103,385,105,385,102,382,100,381,98,385,96,386,96,388,93,393,92,397,96,404,94,405,95,408,93,404,91,406,87,419,84,423,87,430,89,432,86,441,95,445,94,453,97,454,98,454,98"  
    href="#kaz" alt="Казахстан" > 
 
    <area id="Kor" shape="poly" 
     coords="555,136,553,139,550,136,546,132,539,124,538,121,543,123,549,129,549,129,555,135"  
     href="#kor" alt="Корея" href="#"> 
 
    <area id="Yap" shape="poly" 
     coords="561,134,564,131,568,130,568,124,563,115,566,113,568,109,556,106,559,112,561,119,562,122,558,128,556,133,556,133"  
     href="#yap" alt="Япония" > 
 
    <area id="Den" shape="poly"  
    coords="325,92,325,88,321,86,319,87,316,86,313,90,310,94,310,99,314,98,313,102,320,102,323,102,324,100,322,97,327,94,325,93,312,90,313,93"  
    href="#den" alt="Дания" > 
 
    <area id="Shw" shape="poly"  
    coords="327,83,323,84,321,82,323,82,318,76,321,74,320,72,321,68,322,65,324,63,325,61,331,54,341,52,347,53,353,55,338,54,335,57,334,66,329,70,329,74,332,75,329,78,328,80" 
     href="#shw" alt="Швеция" > 
 
    <area id="Rus" shape="poly"  
    coords="353,83,385,94,391,91,398,94,406,94,404,87,413,84,423,84,426,86,433,86,443,93,454,95,457,97,462,93,470,96,473,96,471,92,474,90,481,94,483,96,488,95,495,98,501,96,504,95,509,97,511,96,510,92,508,90,513,88,520,91,526,96,530,98,535,100,536,102,541,100,543,105,542,108,540,107,539,109,543,112,546,113,548,111,550,103,550,99,546,91,540,87,536,89,532,86,535,76,545,76,549,75,554,77,554,71,558,71,561,73,563,70,565,73,562,81,571,93,576,94,578,85,572,78,568,75,573,77,579,74,586,70,581,65,584,63,594,66,594,61,569,55,553,53,541,53,514,50,498,51,482,47,461,46,456,42,436,40,417,48,403,47,393,54,384,52,384,48,391,44,398,43,395,40,383,43,377,50,382,55,368,58,361,64,351,69,347,73,346,82,351,84" 
     href="#rus" alt="Россия" > 
 
    <area id="Bel" shape="poly" 
     coords="387,115,389,113,386,108,385,106,387,102,383,100,384,93,352,84,354,90,356,94,346,93,340,91,340,100,344,102,351,100,355,104,360,105,361,109,365,107,364,103,369,102,367,107,375,110,381,113,381,113" 
      href="#bel" alt="Беларусь лучшая страна на свете!" > 
 
    <area id="Iran" shape="poly"  
    coords="411,151,414,152,418,153,419,154,420,151,424,149,423,148,421,145,418,141,418,135,415,127,406,123,401,125,399,127,393,125,389,119,386,119,381,121,383,125,386,130,385,133,389,137,392,142,393,144,393,141,399,146,404,150,408,148,410,148"  
    href="#iran" alt="Иран" > 
 
 
     <area id="NewZel" shape="poly"  
    coords="610,319,613,313,618,311,623,308,629,305,634,301,633,290,630,291,629,299,618,307,601,317,602,320,609,317"  
    href="#newzel" alt="Новая Зеландия" > 
   </map> 
   </body> 
</html>

READ ALSO
Chrome: сохранение правок в HTML для чужих сайтов
HTML

Chrome: сохранение правок в HTML для чужих сайтов

Есть ли на Chrome какое-нибудь расширение, способное запомнить те изменения, которые я через devTools внесуА потом при рендере сайта, подменять указанные...

 201
Jquery, поиск по колонки таблицы
jQuery

Jquery, поиск по колонки таблицы

У меня есть таблица с тремя колонками

 223
Из двух скриптов сделать один
jQuery

Из двух скриптов сделать один

Необходимо из двух скриптов сделать одинНужно чтобы когда выбиралось connectid=7 и presentId=1 то появляющее окно inbound_from, а если выбиралось connectid=7 и presentId=2...

 234
Не проигрывается одна из анимаций на Unity
c#

Не проигрывается одна из анимаций на Unity

Когда нажимаю на кнопку удара, не проигрывается анимация Punch(), ее запускает State Punch

 211