2013-04-12 19 views
12

私はイーヴ・オンラインのゲーム・ブラウザのRoRアプリケーションを構築しています。私のアプリケーションの要件の1つは、graphvizによって生成されたSVGグラフを表示することです。私はこの環境の中で私の要求を満たすいくつかの問題を抱えています。インラインSVG対<object>埋め込み

公式ドキュメントはイブのIGBのために利用可能ですが、ウィキを示し:

新しいEVEオンラインゲーム内ブラウザが(ムーンドギー開発コード名)の二つの要素の組み合わせテクノロジ・スタックに基づいています。

Awesomium:レンダリングされたWebページを3Dエンジンによって解析可能なデータとして配信するミドルウェアレイヤー。 AwesomiumはKhrona Softwareによって開発されました。

Chromium:プロセス間通信、Webページレンダリング、HTTP通信、およびWebブラウザの作成に必要なその他すべての基本事項を提供するミドルウェアレイヤ。 Apple自体のWebkitフレームワークに基づいています。 Chromiumは、主にGoogleによって擁護されたオープンソースプロジェクトです。

このため、MoondoggieはAcid3テストに合格できるため、HTML 4.01とCSS3の完全な仕様をサポートすることができます。

私のアプリケーションのjavascriptにアクセスするにはSVGに含まれているリンクが必要です。 <embed>または<object>を埋め込むと、SVGがJSファイルのスコープから外れます。

<embed>または<object>を使用すると、ゲーム内のブラウザでsvgが正しくレンダリングされます。下にあるようにインラインになっているときは、SVGからのテキスト要素を含む1行のテキストが表示されます。

更新 ここに私がいる場所があります。私はそれだけで私の視野の中にrender file:を使用して違いを気付かなかったので、これはほとんどが冗長であると確信しています。私は、MIMEタイプの登録はrespond_toと併用するほうがいいと思っていますが、このシナリオではどのように使用するのか分かりません。メインビューの

スニペット:

<%= render "map/map" %> 

部分ビューファイル:

<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:svg="http://www.w3.org/2000/svg"> 
<head> 
    <title>Embedded SVG</title> 
</head> 
    <body> 
     <%= render file: @map.output_file_path %> 
    </body> 
</html> 

設定/初期化子/ mime_types.rb:

Mime::Type.register "image/svg+xml", :svg 

それがレンダリングなぜ私は理解していません<object>タグ内では正常ですが、インラインの場合は正しくありません。メインビューで<object>内の環境をエミュレートするにはどうすればよいですか?または、私は<object>タグに自分のjavascript関数へのアクセスを与えるにはどうすればよいですか?

+0

これはWebkitベースのブラウザがHTML5をサポートしていないことを意味しますか? XHTML 4をオプションで使用していますか?プレHTML5のために、私の経験上、XHTMLは実際にそれを動作させる最も有望な方法です。 –

+0

「HTML5のプロトタイプサポート」がありますが、ヒットするか見逃しているようです。私は本当にわからない。それは、文字通り、このブラウザがサポートしていない、サポートしていないすべてのドキュメントです。私はXHTMLに精通していませんし、doctypeについてもよく扱っていませんが、私はこれを見ています:http://www.w3.org/QA/2002/04/valid-dtd-list.html 。 XHTMLを使うには '<!DOCTYPE html>'の代わりにこれらのうちの1つを使う必要があると思いますか? – sicks

+0

ちょっとしたアイデア。 Google Chartsの機能を調べる価値があるかもしれません。彼らはSVGとJavascriptを多用しているので、そこにいくつかのアイデアを得ることができるかもしれません。多分インタラクティブギャラリーhttps://developers.google.com/chart/interactive/docs/galleryの円グラフを掘り下げてアイデアを得ることができます。私は彼らがタグを直接使っていると思う。 – Phil

答えて

4

親ドキュメントから<オブジェクト>または<埋め込み>内のドキュメントにアクセスすることは可能です。これはACID3がまだテストしている(方法が少なすぎる)ものの一つです。

Here's an example親html文書内のスクリプトからsvg文書を変更する方法。

+0

オブジェクト/埋め込みには、親からのイベントリスナーが必要です。だから私は最初にインラインで使っていたのです。親ページの関数を呼び出す ' 'の内部のタグにイベントリスナーを追加できますか? – sicks

+0

はい。 'elm.addEventListener'でイベントリスナーを追加し、次に' window.parent.yourFunctionInMainDocument(...) 'というように呼び出すことができるイベントを処理する関数で、この例と少し似ています:http://dahlström.net /svg/html/from-svg-to-parent-html-script.html。 –

関連する問題