7

我正在我的 ASP.NET Web 应用程序中绘制形状。在 IE9 和其他浏览器中，我使用 SVG 进行操作，而且效果很好。在 IE8 及以下版本中，我使用的是 VML。我发现 IE8 在 IE8 标准模式下（不使用兼容性视图）时根本不显示 VML。

我的文档类型设置为<!DOCTYPE html>. 如果我完全取消 doctype，IE8 会进入 quirks 模式并且工作正常，但 IE9 然后会进入其quirks 模式（而不是 IE9 标准）并且不显示 SVG。

<svg>这发生在测试页面上，因此除了包含包含元素及其子元素或 VML 元素的 div 的表单之外没有任何内容。

这里发生了什么？似乎我不应该为不同的浏览器更改文档类型，并且 Stack Exchange 用户页面上的信誉图似乎以相同的方式工作（IE8 及以下版本的 VML，其他所有人的 SVG，HTML5 文档类型）......

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);
  • 不会显示矩形元素！你也不能修改它的 CSS，因为你可能只会让浏览器崩溃。但是，有一个解决方法。将元素的 outerHTML 复制到自身中：

.

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

要在 IE8 标准模式下声明 VML 命名空间，您需要包含第三个'#default#VML'参数：

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 回答