我正在尝试使用Raphael在网页中创建类似于此example的地图工具。使用raphael缩放多个路径
我有我想使用的地图的svg文件,而省份都是文件中的单独路径。但是,如果我将svg文件的坐标直接复制到拉斐尔路径,则图像太大而不适合屏幕,因此我需要对其进行缩放。
我知道我可以使用比例函数来单独缩放所有省份的路径,但之后它们将不再接触对方,我必须移动它们以重新组装地图。
有没有办法将路径分组在一起并缩放整个事物,还是有一些巧妙的工具来缩放原始svg文件? Inkscape缩放看起来不会修改svg文件中的坐标。
谢谢。
来源:
window.onload=function(){
var paper = new Raphael(document.getElementById('canvas_container'),2000,4000);
var province = {}
province.a = paper.path("M 1195.23,2765.05 1176.44,2753.8 1182.93,2743.86 1198.21,2745.13 1201.92,2738.14 1239.79,2738.32 1263.62,2752.62 1284.76,2743.95 1317.8,2750.74 1367.35,2746.42 1392.66,2715.11 1400.21,2696.4 1414.4,2707.23 1451.71,2707 1456.53,2690.06 1486.98,2691.43 1517.68,2681.6 1536.64,2650.12 1560.81,2641.94 1566.44,2625.91 1655.76,2577.95 1652.86,2580.91 1640.92,2614.69 1610.92,2642.31 1590.74,2684.67 1565.32,2702.68 1559.58,2720.44 1521.84,2784.07 1477.67,2814.72 1461.87,2821.15 1442.9,2853.64 1440.5,2874.94 1420.09,2879.49 1381.85,2912.96 1374.51,2932.58 1336.52,2969.11 1318.56,2959.93 1310.72,2940.64 1294.49,2938.23 1287.2,2923.45 1265.55,2923.98 1246.43,2913.8 1239.54,2901.7 1213.98,2894.24 1206.33,2881.17 1214.32,2876.4 1199.89,2858.79 1204.99,2841.58 1220.87,2835.67 1210.72,2812.63 1232.15,2807.48 1225.15,2793.26 1231.23,2781.47 1213.41,2762.4 1195.23,2765.05 z");
province.b = paper.path("M 1050.73,2867.78 1046.35,2845.33 1040.53,2832.74 1044.23,2819.35 1066.03,2819.42 1087.07,2805.18 1094.97,2784.45 1104.23,2779.31 1115.05,2774.95 1131.12,2800.44 1146.19,2792.66 1146.45,2777.1 1166.57,2777.52 1166.63,2804.27 1194.54,2818.11 1210.74,2812.67 1220.87,2835.67 1204.99,2841.58 1199.89,2858.79 1214.32,2876.4 1206.33,2881.17 1213.98,2894.24 1239.54,2901.7 1246.43,2913.8 1265.55,2923.98 1287.2,2923.45 1294.49,2938.23 1310.72,2940.64 1318.56,2959.93 1336.52,2969.11 1320.71,2984.32 1320.22,2994.45 1309.88,3001.29 1297.83,2993.4 1293.02,2997.09 1289.27,3013.92 1283.96,3022.6 1275.93,3022.85 1266.2,3024.26 1259.83,3020.74 1253.98,3024.67 1246.93,3031.3 1237.88,3017.88 1214.41,3015.12 1185.95,3005.82 1174.43,3017.4 1174.77,3035.97 1170.62,3043.42 1158.95,3043.06 1145.56,3029.7 1137.74,3036.82 1127.73,3037.17 1121.47,3030.56 1114.84,3035.16 1101.49,3035.03 1102.89,3011.96 1123.59,2990.26 1137.04,2989.94 1130.85,2973.55 1120.31,2972.88 1114.08,2984.93 1100.47,2983.63 1095.19,2970.61 1085.65,2970.31 1077.68,2950.18 1061.43,2942.38 1057.59,2940.54 1055.36,2924.83 1041.79,2915.84 1041.19,2898.89 1048.93,2884.2 1032.89,2877.32 1038.29,2867.02 1050.73,2867.78 z");
province.a.scale(.5, .5);
province.b.scale(.5, .5); }
难道你不应该在你身上有其他字母吗? “,”代表“L”吗? – 2010-07-28 13:12:57
The,只分隔x和y坐标,但如果坐标对之间没有字母,代码似乎将默认放在L中。如果我替换字符串的效果是相同的: M 1195.23,2765.05 L 1176.44,2753.8 L 1182.93,2743.86 ... ... – Keppo 2010-07-29 05:37:04