09.01.2011, 18:18
|
|
NodeJS developer - ушел
|
|
Регистрация: 06.01.2010
Сообщений: 1,022
|
|
Уменьшее svg карт
Подскажите пожалуйста.
Хочется доделать пример для блога
http://javascript.ru/blog/mycoding/Raphael-framework
Карту России уменьшить в векторном редакторе.
Использую Inkscape вроде уменьшает как надо в 3 раза
Но в итоге, после добавления в Raphael карта такая же большая и приходится
программно уменьшать.(хотя если открыть в получившееся изображение само по себе оно уменьше
в 3 раза.)
В современных браузерах Raphael изменяет размер карты быстро, но
в ie6 около 90 секунд.
Вот исходная карта http://upload.wikimedia.org/wikipedi...ts_2007-07.svg
Может помочь пожалуйста?
Последний раз редактировалось mycoding, 09.01.2011 в 18:23.
|
|
09.01.2011, 18:26
|
|
Матрос
|
|
Регистрация: 04.04.2008
Сообщений: 6,246
|
|
нету IE 6 чтобы проверить
Последний раз редактировалось Gvozd, 30.04.2012 в 23:36.
|
|
09.01.2011, 20:01
|
|
NodeJS developer - ушел
|
|
Регистрация: 06.01.2010
Сообщений: 1,022
|
|
Спасибо за старания, наверное это я туплю.
У меня не получается вставить карту в пример без уменьшения карты.
Наверное я что то недопонимаю.
У Вас Gvozd получился точно такой же пример как у меня.
Почему не получается я не пойму.
Эх ладно.
|
|
09.01.2011, 20:05
|
|
Матрос
|
|
Регистрация: 04.04.2008
Сообщений: 6,246
|
|
а как вы ее вставляете-то?
я просто открыл файл в браузере(Opera, FF), и получил уменьшенный вариант.
может быть проблема именно в способе вставки на итоговую страницу?
покажите, как вы это делаете
|
|
09.01.2011, 20:06
|
|
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
mycoding, в карте Gvozd и первоначальном нет никаких изменений кроме 11 и 12 строки, в оригинале:
width="1650"
height="1000"
в уменьшенном:
width="550"
height="333"
Так что всё должно работать
|
|
09.01.2011, 20:13
|
|
NodeJS developer - ушел
|
|
Регистрация: 06.01.2010
Сообщений: 1,022
|
|
Сама карта если её открыть в браузере получается уменьшенная в 3 раза.
Но в Raphael надо вставлять каждый регион отдельно.
Т.е. вот так
Цитата:
|
window.Russia = R.set();
Russia.push(
BelgorodOblast = R.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").attr({city:"BelgorodOblast"}),
BryanskOblast = R.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"),
IvanovoOblast = R.path("M 288.5,586.4 L 281.6,581.8 L 277.9,584 C 272.4,587.1 267.1,586.7 261,582.8 C 256.8,580.1 256,579.2 256.3,577.1 C 256.6,575.3 255.5,573.4 251.4,569.2 C 246.3,563.9 246,563.7 243.6,565 C 241,566.3 235.8,565.9 233,564.2 C 230.9,562.8 236.9,557.8 245.9,553.2 C 250,551 254.8,548.6 256.4,547.7 C 258.5,546.6 262,546.1 267.7,546.1 C 278,546.1 282.6,548.1 287.2,554.8 C 294,564.6 296.2,566.4 304.8,569 C 312.4,571.2 313,571.3 314.7,569.7 C 317,567.7 321.9,567.5 321.9,569.4 C 321.9,570.2 321.2,571.4 320.4,572.1 C 319.4,572.9 318.9,575.1 318.9,578.6 L 318.9,583.9 L 313.3,583.4 C 308.6,583 307.1,583.3 304,585.3 C 294.4,591.7 296.1,591.6 288.5,586.4 Z"),
И т.д.
|
Т.е. я открываю файл svg нахожу в нем место где прописываются координаты региона и записываю их в методе push.
Т.е. надо чтобы векторный редактор менял координаты регионов, а не width и height.
|
|
09.01.2011, 20:19
|
|
Матрос
|
|
Регистрация: 04.04.2008
Сообщений: 6,246
|
|
Сообщение от mycoding
|
window.Russia = R.set();
|
я с Raphael не работал
но здравый смысл подсказывает, что должен быть способ задать атрибуты корневого элемента svg
скорее всего в данном конструкторе
[telepatemode]
window.Russia = R.set({width:"550",height:"333"});
//либо
window.Russia = Raphael(0, 0, 550, 333);
[/telepatemode]
|
|
09.01.2011, 21:04
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Сообщение от Gvozd
|
[telepatemode]
|
ровно на сутки хватило
|
|
09.01.2011, 21:26
|
|
NodeJS developer - ушел
|
|
Регистрация: 06.01.2010
Сообщений: 1,022
|
|
Сообщение от Gvozd
|
я с Raphael не работал
но здравый смысл подсказывает, что должен быть способ задать атрибуты корневого элемента svg
скорее всего в данном конструкторе
[telepatemode]
window.Russia = R.set({width:"550",height:"333"});
//либо
window.Russia = Raphael(0, 0, 550, 333);
[/telepatemode]
|
Вроде такого способа нет.
Есть вот такое
Цитата:
|
Есть Russia.attr({
width:420,
height:300
})
|
Но он почему то не работает в этом случаем.
Ладно буду думать. Все таки лучшим способом является изменить
исходное изображение.
Последний раз редактировалось mycoding, 09.01.2011 в 21:31.
|
|
09.01.2011, 22:03
|
|
Матрос
|
|
Регистрация: 04.04.2008
Сообщений: 6,246
|
|
Сообщение от monolithed
|
ровно на сутки хватило
|
полноте, вам сударь
использование данного тега, выходит за рамки того обсуждения.
Есть разница между
- отсутствием ответа, и фразой "телепаты в отпуске" (что и обсуждалось)
- наличием ответа, в правильности и полезности которого я сомневаюсь.
при чем в данном случае не из-за неоплноты описываемой картины ТС-а, а из-за моего незнакомства с упомянутым инструментом
mycoding, так измените рисунок исходный
корректных графических редакторов я вам посоветовать не могу.
но, вам под силу написать программу по модификации рисунка.
аттрибут d тега path содержит в себе набор цифр, являющихся арсстояниями.
поделите их все на 3
и не забудьте поделить на 3
Код:
|
width="1650"
height="1000"
viewBox="0 0 1650 1000" |
|
|
|
|