1

SVG がページの下の方に表示され続けます。この 1 週間にわたって徹底的な検索を実行しましたが、解決策が見つかりません。

ここで私の言いたいことを確認してください。

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 はリンクを 2 つに制限しています。お使いの IE では機能しない可能性があります)。ラファエルの実装でマップ データに使用しました。

SVG マップが画面のずっと下まで読み込まれている理由を誰か教えてもらえますか?

任意のポインタをいただければ幸いです。ティア。

(余談: 紋章はオフライン テストで表示され、オンラインでは機能しないことがわかりました。小さな問題です)

4

3 に答える 3

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>

スクリプトからパス定義を取得しました。

つまり、一言で言えば、グラフィックを再作成します。上記のエディターを使用できますが、面倒なコピー/貼り付けが必要になります。

于 2012-06-01T19:52:44.067 に答える
2

Strah の言うとおりです。パスは、表示する予定のウィンドウの外側にオフセットされています。パスを再作成しないでください。必要ではないだけです。作成時にパスを変換するだけです。このような複雑で相互に関連するパスの座標系は、すでに任意です。パス間の関係が重要であり、起源ではありません。

// init.js...

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

obj.attr(attributes).attr( { transform: "t0,-500" } );
于 2012-06-01T21:07:00.650 に答える
1

パスで定義されたマップをセットに入れます。これは簡単です。パスの作成を開始する前のコード行と、作成した最後のパスの後のコード行です。

2 つの同一のセットがここで作成されているのを見ることができます。1 が動かされない限り、それらは互いに重なっています。

絵は千の言葉を描きます。これが簡単な例です。これを行う方法を永遠に知っておく必要があります...

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

于 2012-06-03T08:22:04.340 に答える