Проблемы с изменением размера SVG в Рафаэле

Question

Я пытаюсь нарисовать эту карту Европы , используя Рафаэля.Для каждого пути в svg я проанализировал его и сделал: r.path([countrypath]).Это работает, но проблема в том, что это гигантский.Например, некоторые из путей выглядят как M 11689.234, 6005.2561... Это даже близко не подходит для размещения на холсте 500x500.Как мне изменить это?Масштаб / перевод Рафаэля, похоже, не работает, или я не знаю, как его использовать.Я заметил, что в SVG каждый путь имеет transform="translate(5.875e-4,7.538462e-5)" Мне нужно как-то изменить viewBox?Или как-то изменить путь svg, прежде чем он коснется Рафаэля?

Answer 1

Вы можете использовать масштаб (Xtimes, Ytimes, centreX, centreY)

, где Xtimes, Ytimes - это уменьшение пропорции, если вы выберете 0,2, изображения будут уменьшены до 1/5

и

centreX, centreY - это относительные координаты, где вы должны выбрать 0,0, чтобы все пути / части SVG масштабировались равномерно и относительно

, если вы выбираете масштаб (0,2,0,2,0,0) ваше изображение будет правильно уменьшено до 1/5

Answer 2

У вас есть два варианта, либо используйте то, что я сделал, используйте .transform (" строка преобразования ") для масштабирования путей, строка преобразования может быть sww, hh, xx, yy где ww и hh насколько вы хотите масштабировать путь.

.transform("s0.25,0.25,0,0");

Вы можете найти ПРИМЕР ЗДЕСЬ или jsfiddle ЗДЕСЬ. Или используйте

paper.scaleAll(n);

где n - это количество, на которое вы хотите масштабировать всю бумагу. Сначала создайте путь на странице, а затем масштабируйте бумажный объект, возможно, наполовину

paper.scaleAll(0.5);

Вы можете найти библиотеку и примеры для библиотеки Scale.Raphaeljs по ссылке ниже: Библиотека шкалы Рафаэля

Answer 3

Я на самом деле вчера выбрал довольно большой SVG мира и передал его через конвертер SVGTOHTML.Вы найдете инструмент и связанную с ним информацию @ http://www.irunmywebsite.com/raphael/svgsource.php

Я настроил целую загрузку ресурсов для Рафаэля @ http://www.irunmywebsite.com/raphael/raphaelsource.php Среди них вы найдете карту мира, завернутую в масштабный плутон, предоставленныйZeven!

20-минутное упражнение доставило это ... http://www.irunmywebsite.com/raphael/colourmap2.php

Надеюсь, это поможет вам или кому-то с подобной проблемой в будущем.Также обратите внимание, что вы можете упростить пути в редакторах SVG, а также масштабировать их, прежде чем помещать их в конвертер SVGTOHTML.Очень часто карты можно нарисовать до мельчайших деталей, но их упрощение значительно сократит длину пути.

Answer 4

Перевод на такое небольшое количество кажется немного расточительным, в любом случае, это ~ 0, я сомневаюсь, что вы заметите большую разницу, если вы удалите атрибуты преобразования, которые выглядят так.

Да, изменение viewBox могло бы привести его в соответствие с тем, что вы хотели, во всех средствах просмотра, поддерживающих SVG, но сам Raphael не поддерживает viewBox (вам нужно было бы предоставить запасной вариант VML самостоятельно).

Либо предварительно обработайте данные пути, чтобы они соответствовали вашему конкретному использованию (вероятно, в любом случае это хорошая идея, это всегда помогает уменьшить размер файла, карты википедии обычно довольно велики) или используйте функцию масштабирования Рафаэля, чтобы масштабировали пути до правильный размер .

Обновление : Raphaël v2.0 и новее поддерживает viewBox (через метод setViewBox ).

Answer 5

Вы можете использовать атрибут Raphael 'translation', который принимает дельту x, y. то есть:

r.path([countryPath]).attr({translation:'-11689, -6005'});

Чтобы сделать его более пригодным для многократного использования, вы можете проанализировать значения x и y из M в вашем пути svg. Когда я сделал это, оказалось, что я не хотел, чтобы мой путь был точно на 0,0, поскольку он также отправлял его по холсту - может потребоваться некоторая настройка в зависимости от высоты и ширины вашего элемента. 1006 *