5

Raphael.js を使用してクロスブラウザーのインタラクティブなベクター グラフィックスを作成し、別のコードを使用して新しい機能を追加して、機能を「SVG モード」と「VML モード」で動作させようとしています。

私の問題は、Raphael が作成する実際の IE VML 出力の定義プロパティを調べたり、デバッグしたり、変更したり、表示したりする方法がまったくないことです。

SVG では簡単です。Firebug または Inspect Element を使用して DOM を掘り下げるだけで、SVG は適切なマークアップとともにすぐそこにあります。ただし、VML の IE7 および IE8 では、IE ブラウザ ツールで [更新] をクリックすると、多数の<shape/>エンティティが表示されますが、それらはすべて同一のプロパティとマークアップを持っていると主張しています。実際に定義されている VML プロパティはどこにもありません。

これは、IE8 モードでのRaphael tiger デモを示す例です (IE7 モードも同じです)。しかし、DOM を (IE 開発者ツールを使用して) 見ると、それはトラではなく、1 ピクセル x 1 ピクセルの形状が で積み上げられた山に過ぎないように見えますleft:0px;top:0px;。

シェイプの塗りつぶし、パス、ストローク、位置、および変換プロパティの定義は、DOM または最終出力のどこにありますか?

ここに画像の説明を入力

DOM のどこかに、青色で強調表示された形状のプロパティを定義する何かがあり、虎のひげの白い塗りつぶしとパス定義を与えています。このデータはどこにあり、どのようにアクセスできますか?

そのままの IE8 でそれが不可能な場合は、プラグイン、ツールバー、または IE8 以外の VML プロセッサを含む回答の方が、何もないよりはましです。非常に古いバージョンの IE でそれを行う方法がある場合は、それで問題ありません。それらはすべて、 http://modern.ieからテスト目的で自由かつ合法的に入手できます。

4

2 に答える 2

2

更新: IE8 モードに設定された IE11 のようです。VML 要素またはそのノードをログに記録すると、Firebug を必要とせずに参照できます。また、コンソール (コンソールなど) で VML オブジェクトをターゲットにできる場合はwindow.someVML = raphaelElement.node;、window.someVMLそのスタイルの要素を次のように変更できます。要素をsomeVML.style.outline = "#000000 5px solid";ライブ更新して更新しcurrentStyleます。ただしfill、. stroke_innerHTML

VML の現在のプロパティを示すものを見つけました。これらは編集できませんが、何もないよりはましです。

  1. IE8 用のFirebug Liteブックマークレットを入手する
  2. Firebug Lite を実行して IE8 で Raphael を実行し、VML を検査するconsole.log();Raphael オブジェクトをログに記録します。
  3. Firebug Lite コンソールで、適切な緑色のRaphaël’s object { }エントリをクリックします。

  4. Expand node- これは実際の VML であり、実際にページに表示されます。注目すべき特定のプロパティ:

    • outerHTMLVML パス定義とその他のほとんどのプロパティが XML 形式で含まれています
    • offsetLeft、offsetTop
    • currentStyle、、、が含まれてheightいwidthます。もあります（IE開発ツールに表示されるのと同じ信頼できないデータのようです）lefttopruntimeStylestyle
    • の XML を除いて、塗りつぶしまたは線のデータがどこにも見つかりません (fill.rvml および stroke.rvml の子を含む)。outerHTML

実際の VML 出力を Raphael オブジェクトのプロパティと簡単に比較したい場合は、Raphael オブジェクトのプロパティattrs( path、fill、stroke、path...) と をmatrix並べnodeて表示paperし、親の Raphael paper オブジェクトに戻ることができます。

そのため、Raphael オブジェクトをログに記録するよりもconsole.log(someRaphObject.node);、通常は Raphael オブジェクトをログに記録する方が適切です。これにより、Raphael による期待結果と VML の実際の結果を並べて比較できます。

Firebug Lite と IE に関する重要な注意事項 -通常の IE 開発ツール コンソールを混乱させる可能性があります。ここでそれを回避するいくつかの方法。

于 2013-07-10T12:18:30.673 に答える
1

ここでの問題は、DOM が正しくない (VML が正しく表示されている) というよりも、IE8 の開発ツールにあると推測します。より良いツールキットを使用しています。

  1. 私は互換モードのファンではありませんが、この場合は検討する価値があるかもしれません。IE10 の開発ツールが IE8 の開発ツールよりもはるかに強力であることを考えると、これを IE10 の IE8 互換モード (またはその IE7 互換モード) で試しましたか? このモードでは、IE8 の通常のコピーと同じように VML を使用しますが、IE8 よりもはるかに優れた IE10 開発ツールを利用できるため、何が起こっているのかをよりよく把握できる可能性があります。

  2. もう 1 つのオプションは、 Firebug Liteを使用することです。これは、Firefox の開発ツール Firebug の縮小版であり、どのブラウザーでも実行できます。他のすべてのブラウザーには十分に優れた開発ツールがあり、実際には必要ないため、しばらく使用していませんが、まともな小さなユーティリティであり、この場合に必要な DOM を閲覧するのに特に役立ちます. この特定のケースでは、IE8 独自の組み込み開発ツールよりも優れていることが証明される可能性があります。

それらのアイデアが役立つことを願っています。

しかし、最後に 1 つの考え:

あなたは、「機能を「SVGモード」と「VMLモード」で機能させるための別のコードを書こうとしていると述べています。

あなたは Raphael を使っているので、私はこれに当惑しています。開発者は Raphael オブジェクトに書き込むだけで、Raphael は VML または SVG の個別のコード ブランチを処理します。それを考えると、独自の SVG/VML コード パスを記述する必要があると感じる理由がわかりません。

ただし、追加のポイントとして、VML コードを作成する場合は、これが IE7 と IE8 の両方と互換性があると説明していることに注意してください。そのため、これら 2 つの IE バージョン間で VML 言語が大幅に変更されたことを警告する必要があります。繰り返しになりますが、Raphael は開発者に対して透過的に内部的に相違点を扱っていますが、VML コードを手動で記述している場合は、それらの相違点に注意する必要があります。これについては、こちらで少し読むことができます: http://ajaxian.com/archives/the-vml-changes-in-ie-8

于 2013-07-09T16:12:41.580 に答える