2012-06-01 18 views
1

我的SVG在頁面上顯示得太慢。 我在過去的一週中進行了詳盡的搜索,找不到解決方案。RaphaelJS在屏幕上繪製我的SVG太遠

請點擊這裏查看我的意思。

http://danu2.it.nuigalway.ie/09101916/raphael_map/

我可以-450px調整邊距頂部,但後來該項目將導致我的問題。我跟着http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html上的偉大教程,就像我一樣。

這是SVG works.svg(標記爲我上面的鏈接可以看到,sOf將我限制爲兩個鏈接,可能不適用於您的IE)我用於raphael實現中的地圖數據。

有誰能告訴我爲什麼SVG地圖加載到屏幕的下方?

任何指針將不勝感激。蒂亞。

(旁白:武器的顯示器上離線測試的外衣,只是發現它不聯機工作,小問題)

回答

2

Strah是正確的:您的路徑偏移到您要顯示的窗口之外。請不要重新創建你的路徑 - 這是沒有必要的。在創建它們時簡單地改變你的路徑。這種複雜的,相互關聯的路徑的座標系已經是任意的;路徑之間的關係是重要的,而不是起源。

// init.js... 

var obj = r.path(paths[county].path); 

obj.attr(attributes).attr({ transform: "t0,-500" }); 
2

那是因爲你的paths.js是這麼說的。

例如,如果你把多尼戈爾的定義,請複製並粘貼到像這樣的一個在線SVG編輯:SVG-edit

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 
<g> 
    <title>Layer 1</title> 
    <path d="m249.813,525.80298c-1.31401,0.00403 -2.642,0.08698 -3.90401,0.08698c-2.552,0 -1.83499,1.54102 -0.28799,2.57202c1.73999,1.16003 3.37199,3.25903 4.86099,4.00403c0.64101,0.31995 2.688,3.70795 1.71501,4.29199c-2.804,1.68201 -3.63901,1.43799 -5.149,-0.57599c-2.48401,-3.31201 -0.968,-0.92303 -2.571,-0.28101c-1.15401,0.46198 -4.82501,0.263 -4.86101,0.28101c-1.505,0.75195 -3.717,1.18396 -3.717,3.72296c0,2.20099 -0.134,3.73602 0.85699,5.71899c0.664,1.32904 1.642,2.14502 2.284,3.42902c0.92101,1.84302 0.86301,3.474 0.86301,5.72498c0,1.98102 0.24699,4.073 -0.576,5.71802c-0.35199,0.703 -0.25499,5.28699 -0.856,5.43701c-1.23999,0.31 -5.14899,0.97699 -5.14899,2.57098c0,2.935 0.23299,2.83099 -1.71501,4.29199c-0.68399,0.513 -6.87199,3.12799 -5.19899,-0.21899c0.845,-1.68799 2.64999,-2.47101 3.14699,-4.461c0.466,-1.862 2.12001,-2.31799 2.634,-3.53497c0.183,-0.43103 -1.56,-0.94904 -1.38899,-1.633c0.53,-2.12201 1.563,-2.539 2.521,-4.45502c0.881,-1.76099 2.03799,-0.43701 1.433,-2.85901c-0.36,-1.44098 -0.895,-2.36096 -0.895,-4.15399c0,-1.83698 -0.84999,-5.07397 -2.82799,-5.56799c-2.681,-0.66998 -0.817,-2.19904 -1.714,-4.29199c-1.42101,-3.31403 -2.77299,-2.29004 -6.864,-2.29004c-1.793,0 -5.19701,0.54504 -5.769,2.828c-0.35201,1.409 -2.966,2.47205 -2.72801,3.90399c0.32701,1.96002 2.20201,1.33301 2.20201,3.27802c0,2.117 -1.37801,3.52802 -2.283,4.58002c-0.09599,-0.302 -1.96201,1.29297 -1.70799,-3.33398c0.101,-1.83502 0.06898,-2.86401 -4.34901,-3.03503c-1.286,-0.04901 1.731,-1.591 1.32001,-3.23401c-0.49699,-1.98895 -2.834,-1.521 -4.248,-0.81299c-1.437,0.71802 -0.60899,3.66901 -1.62,4.85504c-0.754,0.88397 -2.325,1.15497 -3.642,1.414c-1.47501,0.28998 1.21899,4.42596 -2.321,3.54095c-1.179,-0.29401 -0.99501,-1.03699 -2.12701,-2.32697c-0.823,-0.93805 -1.92499,1.48999 -3.23499,0.50696c-2.84201,-2.13196 -2.12001,0.50604 -4.248,0.50604c-0.789,0 -3.03401,-0.31201 -3.03401,0.80701c0,0.76599 0.39801,3.91699 1.01401,4.65497c1.646,1.97498 0.433,1.23798 -0.40601,3.03503c-0.847,1.81195 0.35001,3.65594 -0.30099,5.862c-1.235,1.05695 -1.877,-1.151 -2.73401,-2.427c-1.047,-1.55804 -0.56999,-0.86102 -2.52699,-0.90704c-2.427,-0.05798 -1.69499,4.43604 -3.13499,5.15503c-2.71901,1.35901 -0.606,1.05402 -0.606,3.64099c0,1.34998 3.84999,2.98999 3.44,3.23499c-1.06801,0.64099 -3.47801,0.625 -5.05501,1.414c-1.64299,0.82098 0.043,3.40204 1.214,3.841c0.539,0.20203 1.056,0.46698 1.614,0.60699c2.145,0.53601 2.05099,-0.68896 3.64101,-1.00702c1.99399,-0.39899 4.01599,-0.74799 2.83499,1.61401c-0.466,0.93103 -0.79399,3.45099 0.40001,4.04803c1.88399,0.94196 0.681,1.64197 0.20599,2.828c-0.47,1.17499 -1.576,1.909 -2.42799,0.20697c-0.63701,-1.27301 -2.552,-3.07098 -4.44801,-2.83398c-1.68999,0.211 -2.18999,1.21399 -3.642,1.21399c-1.459,0 -4.047,-0.80701 -3.84099,1.013c0.39999,3.54498 0.93599,1.92102 2.42099,3.03497c0.96201,0.72101 3.026,1.20001 3.84801,2.02106c0.358,0.35797 0.62599,1.58295 0,2.83398c-0.32701,0.65399 -2.269,3.79999 -3.44,2.62799c-1.177,-1.17603 -1.631,-1.82599 -3.235,-2.22803c-1.24901,-0.31299 -2.597,-2.828 -3.23399,-2.828c-1.27501,0 -3.35101,-0.41895 -3.84201,0.80701c-0.187,0.46704 -0.153,3.89099 -0.606,4.04199c-2.62599,0.875 -3.073,1.052 -4.855,2.83405c-1.459,1.45898 -1.104,-2.10303 -2.22701,-0.60699c-0.98999,1.31897 -2.05499,1.02698 -1.21399,2.42798c0.612,1.021 2.424,3.58698 3.44,3.841c0.99599,0.24902 1.49599,4.82098 2.42799,4.44897c3.37199,-1.349 2.869,1.64105 5.862,1.21301c4.60699,-0.65802 0.642,0.25903 2.834,0.80701c1.287,0.32202 2.687,-2.508 3.035,-2.42102c1.15599,0.289 1.888,3.69403 2.42099,2.62701c0.565,-1.13 3.50101,-3.40399 4.048,-1.21399c0.614,2.45502 -0.45799,1.35901 -2.021,3.23499c-0.496,0.59503 -1.978,2.99902 0,2.83398c1.89099,-0.15698 4.26399,0.31403 4.849,-2.02698c0.437,-1.745 1.08099,-3.492 1.42,-4.849c0.853,-3.409 4.534,-0.86401 4.448,-0.81299c-0.995,0.59698 -2.004,4.39697 -0.606,4.04797c1.679,-0.41998 2.19701,-2.42798 4.04201,-2.42798c1.319,0 1.953,-1.41699 3.034,-2.22699c0.188,-0.14203 4.203,-2.61499 4.655,-0.80701c0.089,0.35498 0.81801,3.53198 0.2,3.841c-2.48399,1.242 -2.784,2.31 -4.44899,3.64197c-1.776,1.42102 -1.82001,2.16504 -1.82001,4.24805c0,4.00098 -3.166,-0.74005 -2.021,3.841c0.278,1.11499 0.133,3.16699 -2.021,2.62799c-0.27,-0.06702 -0.543,-0.133 -0.813,-0.20001c-0.158,0.21198 -0.218,0.521 -0.287,0.81299c0.339,0.25403 0.327,0.245 1.076,0.80701c0.91,0.68298 4.00299,2.05402 4.86099,3.00299c1.507,-0.02002 2.511,-0.18896 3.14601,-0.71997c1.57799,-1.31403 4.80099,-0.44702 5.71899,-2.28302c0.752,-1.505 3.72301,-0.83099 3.72301,-3.435c0,-1.70599 -0.30801,-3.71399 1.42699,-4.29199c1.30901,-0.43604 2.923,-1.68604 4.57901,-0.85699c1.459,0.729 2.52499,1.43298 4.57399,1.43298c3.108,0 1.53601,-1.745 3.716,-2.28998c2.42,-0.60504 -0.125,-3.36902 1.146,-4.00403c0.12701,-0.06396 5.07701,-2.43097 5.28601,-2.44c-0.93001,-1.23596 1.09799,-3.09302 -1.563,-4.42297c-1.112,-0.55603 -1.90401,2.00195 -3.147,2.00195c-1.56999,0 1.63501,4.05603 -2.002,3.14703c-1.089,-0.27203 -1.354,-2.578 -4.004,-2.578c-2.603,0 -1.72099,-2.82001 -1.72099,-4.86102c0,-1.96497 -0.908,-1.48895 2.28999,-2.85895c2.342,-1.00403 -2.008,-4.00403 2.289,-4.00403c2.147,0 5.45,0.29401 6.576,0.57599c0.37599,0.09399 6.86299,1.40302 6.86299,-2.28998c0,-2.492 3.412,0.44397 3.72301,0.85699c1.35899,1.81201 2.002,-3.51202 2.002,-4.00403c0,-1.58099 -0.073,-3.15399 0.28099,-4.573c0.72301,-2.888 3.436,-1.33698 3.436,-4.57996c0,-2.28003 0.46201,-2.75305 2.002,-4.29205c0.55301,-0.55396 1.394,-1.76196 2.146,-3.00299c0.16501,-0.45099 0.832,-0.94196 0.714,-1.00098c-1.291,-0.64502 0.873,-4.28601 -0.569,-4.28601c-1.799,0 -2.106,-3.82397 -1.433,-5.14899c1.41,-2.77698 0.039,-3.716 3.716,-3.716c0.903,0 3.29399,-2.00201 3.435,-2.00201c2.386,0 4.892,0.56903 4.86099,-1.72101c0.033,-0.01001 0.09401,-0.021 0.15001,-0.03101c-0.42101,-0.29498 -0.716,-0.52295 -0.72,-0.53796c-0.502,-2.01001 0.047,-2.336 1.427,-3.716c0.96701,-0.96698 3.45801,-2.65002 4.42999,-3.62299c1.09,-1.09003 0.785,-2.50305 2.15201,-3.52899c1.28699,-0.96503 2.86301,-1.26404 4.573,-2.29004c1.37,-0.82202 4.267,0.13403 4.57999,-1.43298c0.45001,-2.25201 1.87701,-2.48401 1.427,-4.28601c-0.302,-1.20697 -0.39398,-3.91302 -2.28998,-4.29199c-2.15701,-0.43103 -3.62802,-1.43298 -6.28802,-1.43298c-2.03598,0 -2.569,-1.13 -3.72299,-2.57104c-0.72,-0.89996 -3.04599,-3.052 -3.42899,-3.14697c-2.36101,-0.591 -2.24301,-2.70703 -4.00401,-3.14703c-1.205,-0.30194 -2.504,-0.37494 -3.81799,-0.37097l0,0zm-24.364,87.16602c0.00301,0.00397 0.00301,0.00897 0.00601,0.01202c0.00899,-0.00702 0.00198,-0.01202 -0.00601,-0.01202z" id="svg_1" stroke-width="5" stroke="#000000" fill="none"/> 
</g> 
</svg> 

我參加了一個路徑定義從您的腳本。

所以,簡而言之:重新創建您的圖形。你可以使用上面提到的編輯器,但是需要一些麻煩的複製/粘貼。

+0

感謝您的信息,我懷疑這是我每次裝成Inkscape中一次顯示它的情況,但在工作表的中心。 –

+0

我只是使用你的方法重新編輯了所有的座標數據。再次感謝 –

1

將由路徑定義的地圖放入一個集合中。這很簡單,在你開始創建路徑和一行代碼之前,它是一行代碼。

你可以在這裏看到2個相同的組合。除非1被移動,否則他們會彼此重疊。

一張圖片描繪了千言萬語。 下面是簡單的例子,那麼你應該知道如何永遠做到這一點...

http://www.irunmywebsite.com/raphael/additionalhelp.php?q=movingpath

+0

謝謝,我會再看看這個。 –