web-dev-qa-db-ja.com

Raphael JS-SVGファイルを使用する

私はこの問題に対処するいくつかのスレッドを見ましたが、実際に私の問題を解決するものはありません。地図と異なる地域を含むSVGファイルがあります（ http://www.mediafire.com/?5pmyevdwbyrb51f ）。私はこのようなことをしたいです： http://raphaeljs.com/australia.html 。

しかし問題は、スクリプトで機能するようにファイルを変換する方法です。これらの座標を取得するにはどうすればよいですか？私はいくつかのコンバーターなどを試しましたが、私はそれを機能させることができないのでこれを吸う必要があります。多分誰かが助けることができますか？

javascriptsvgraphael
23
larschanders

Raphaelを使用してSVGファイルをインポートして表示または操作できるようにする場合、現在のところサポートされていません。ただし、拡張機能 raphael-svg-import または raphael-svg-import-classic を確認することをお勧めします。

参照 RaphaelのSVGファイル、使用できますか？

9
Clafou

次のコードを見てください。

http://raphaeljs.com/tiger.html

<script src="tiger.js">
// Load the file with the tiger mapping to a variable
     var tiger = [0,0,600,600,{type:"path",path:"M-122.304 84.285C-12...
</script>

<script>
 // run it
 window.onload = function () {
    var r = Raphael(tiger).translate(200, 200);
 };
</script>
2
fmsf

さらに、ラッパーを使用した mikefrey's answer の例：

var paper = Raphael(0, 0, 160, 600);

var rappar = [...]; // here use the output from rappar

var graphic = paper.set();
rappar.forEach(function (item) {
  graphic.Push(paper
    .path(item.path)
    .attr('fill', item.fill)
    .attr('stroke', item.stroke)
    // ...
  );
});
graphic.transform('s0.8,0.8,0,0');
// ...

Raphael v2.2.6およびrappar v0.0.2の使用。

0
Wtower