7

ASP.NET Web アプリで図形の描画に取り組んでいます。IE9 やその他のブラウザーでは、SVG を使用して実行していますが、うまく機能しています。IE8 以下では、VML を使用しています。IE8 標準モード (互換ビューを使用していない) の場合、IE8 は VML をまったく表示しないことがわかりました。

私のDoctypeはに設定されてい<!DOCTYPE html>ます。doctype を完全に取り除くと、IE8 は互換モードになり、正常に動作しますが、IE9 は(IE9 標準ではなく)その互換モードになり、SVG を表示しません。

<svg>これはテスト ページで発生しているため、要素とその子または VML 要素のいずれかを含む div を含むフォーム以外には何もありません。

ここで何が起こっているのですか？さまざまなブラウザーの doctype を変更する必要はないようです。また、Stack Exchange のユーザー ページのレピュテーション グラフも同じように機能しているようです (IE8 以下では VML、それ以外では SVG、HTML5 doctype)...

4

3 に答える 3

5

さらに確認する必要があることがいくつかあります。

動作ルールのセレクターを変更する必要があります。

  • 要素の寸法または位置を設定する場合、単位はデフォルトで px になりません。動作するように明示的に指定する必要があります。
  • DOM の外部で VML 要素を作成することはできません。

.

var vmlFrag = document.createDocumentFragment();
vmlFrag.insertAdjacentHTML('beforeEnd',
'<v:rect id="aRect" fillcolor="red"         
style="top:15px;left:20px;width:50px;height:30px;position:absolute;"></v:rect>'
);
document.body.appendChild(vmlFrag);
  • rect 要素は表示されません! おそらくブラウザをクラッシュさせるだけなので、その CSS を変更することもできません。ただし、それに対する修正があります。要素の outerHTML をそれ自体にコピーします。

.

var aRect = document.getElementById('aRect');
aRect.outerHTML = aRect.outerHTML;
于 2012-07-10T10:17:33.293 に答える
3

'#default#VML'IE8 標準モードで VML 名前空間を宣言するには、3 番目の引数を含める必要があります。

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

IE8 の VML には他にも注意が必要な変更があります。

于 2012-07-03T23:22:05.467 に答える
1

HighChartsソースコードが解決策を提供しました。実行時に名前空間を追加するだけでなく、特定の CSS 動作も追加する必要があります。

<!--[if lte IE 8 ]>
<script type="text/javascript">
    document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
    document.createStyleSheet().cssText =
        'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' +
        '{ behavior:url(#default#VML); display: inline-block; } ';
</script>
<![endif]-->

その後、js で作成された要素がページに表示されます。デモをご覧ください。

于 2013-01-09T14:10:31.170 に答える