Масштабирование карты России

@Rabbit40rt · Регистрация: 13.06.2013

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

Столкнулся с проблемой, у меня карта задана в виде отрезков, взятых с координат картинки svg,скину js файлы, кому интересно.
Сама карта в координатах(всю не выложил, места нехватит))

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var paths = {
    BelgorodOblast: {
        name: 'BelgorodOblast',
        path: 'M 99.9,675.5 C 99.2,674.7 98.1,669.1 97.5,663.1 C 96.9,657 95.9,651.7 95.4,651.2 C 94.8,650.7 92.2,649.5 89.6,648.5 C 85.6,647.1 84.1,645.7 81.2,641.2 C 77.9,636 77.8,635.5 78.9,631.8 C 79.5,629.7 80.6,627.7 81.3,627.5 C 83.3,626.7 90.6,629.8 95.6,633.5 C 98.7,635.9 101.3,637.1 103.5,637.1 C 106.2,637.1 107.4,637.9 110.3,641.4 C 113.6,645.4 113.9,646.3 113.9,652.2 C 113.8,661.8 112.6,665.6 107.8,671 C 102.6,676.8 101.4,677.4 99.9,675.5 Z'
         },
    BryanskOblast:{
        name: 'BryanskOblast',
        path: 'M 90.1,593.2 C 89,592.5 89,591.6 90,588.3 C 91.8,582 91,581.1 83.6,581.1 L 77.2,581.1 L 76.5,576 C 75.9,571.5 75.5,570.8 72.4,569.3 C 70.5,568.4 68.9,567.1 68.9,566.3 C 68.9,564.6 76.7,553.1 77.9,553.1 C 78.4,553.1 79.1,554 79.4,555 C 80.4,558.1 93.8,561.2 96.5,559 C 97.4,558.2 101.9,557.4 107,557.1 C 115.2,556.6 115.8,556.7 116.3,558.6 C 117.4,562.6 116.8,565.5 114.3,568.9 C 111.1,572.9 109.3,580.7 111,582.7 C 111.9,583.8 111.7,584.1 110.1,584.1 C 108.9,584.1 106.4,586.1 103.9,589.1 C 100.1,593.6 99.3,594.1 95.6,594.1 C 93.3,594 90.8,593.7 90.1,593.2 Z'
        },
 
        
}

и функция которая реализует интерактивность

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
$(function(){
    
    var r = Raphael('map', 1650, 1000),
        attributes = {
            fill: '#fff',
            stroke: '#3899E6',
            'stroke-width': 1,
            'stroke-linejoin': 'round'
        },
        arr = new Array();
    
    for (var country in paths) {
        
        var obj = r.path(paths[country].path);
        
        obj.attr(attributes);
        
        arr[obj.id] = country;
        
        obj
        .hover(function(){
            this.animate({
                fill: '#1669AD'
            }, 300);
        }, function(){
            this.animate({
                fill: attributes.fill
            }, 300);
        });

мне нужно эту карту впихнуть на сайт приблизительно размерами 800x400;Если не подходит такой формат, то какой лучше?

@Freeden · 12.04.2014, 01:36

Как вариант можно отмасштабировать размер карты с помощью transform="scale(индекс_по_оси_Х, индекс_по_оси_У)". Например, чтобы уменьшить размер карты в 2 раза по обеим осям:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var paths = {
    BelgorodOblast: {
        name: 'BelgorodOblast',
        transform: 'scale(0.5)',
        path: 'M 99.9,675.5 C 99.2,674.7 98.1,669.1 97.5,663.1 C 96.9,657 95.9,651.7 95.4,651.2 C 94.8,650.7 92.2,649.5 89.6,648.5 C 85.6,647.1 84.1,645.7 81.2,641.2 C 77.9,636 77.8,635.5 78.9,631.8 C 79.5,629.7 80.6,627.7 81.3,627.5 C 83.3,626.7 90.6,629.8 95.6,633.5 C 98.7,635.9 101.3,637.1 103.5,637.1 C 106.2,637.1 107.4,637.9 110.3,641.4 C 113.6,645.4 113.9,646.3 113.9,652.2 C 113.8,661.8 112.6,665.6 107.8,671 C 102.6,676.8 101.4,677.4 99.9,675.5 Z'
         },
    BryanskOblast:{
        name: 'BryanskOblast',
        transform: 'scale(0.5)',
        path: 'M 90.1,593.2 C 89,592.5 89,591.6 90,588.3 C 91.8,582 91,581.1 83.6,581.1 L 77.2,581.1 L 76.5,576 C 75.9,571.5 75.5,570.8 72.4,569.3 C 70.5,568.4 68.9,567.1 68.9,566.3 C 68.9,564.6 76.7,553.1 77.9,553.1 C 78.4,553.1 79.1,554 79.4,555 C 80.4,558.1 93.8,561.2 96.5,559 C 97.4,558.2 101.9,557.4 107,557.1 C 115.2,556.6 115.8,556.7 116.3,558.6 C 117.4,562.6 116.8,565.5 114.3,568.9 C 111.1,572.9 109.3,580.7 111,582.7 C 111.9,583.8 111.7,584.1 110.1,584.1 C 108.9,584.1 106.4,586.1 103.9,589.1 C 100.1,593.6 99.3,594.1 95.6,594.1 C 93.3,594 90.8,593.7 90.1,593.2 Z'
        },
 
        
}

Но при этом не забудьте про сам размер svg-холста:

JavaScript
1
 var r = Raphael('map', 800, 400),

@Rabbit40rt · 14.04.2014, 23:22 **[ТС]**

Нет, неработает, рабочее полотно тупо обрезает карту и всё, размер карты не изменился

@Freeden · 15.04.2014, 01:05

Может тогда так пойдет?

JavaScript
1
BelgorodOblast.scale(0.5, 0.5);

Попробуйте вписать это после закрытой фигурной скобки var paths = { ....} Если получится (белгородская область уменьшится, ну или попробуйте на других областях), то потом наверное можно уменьшить все области так:

JavaScript
1
2
3
for (i in paths) {
  i.scale(0.5, 0.5);
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Rabbit40rt 0 / 0 / 0 Регистрация: 13.06.2013 Сообщений: 47
	14.04.2014, 23:22 [ТС]
	Нет, неработает, рабочее полотно тупо обрезает карту и всё, размер карты не изменился 0

Опции темы