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 开发者工具），它看起来不应该是一只老虎，而应该只是一堆 1px x 1px 的形状堆积在left:0px;top:0px;.

在 DOM 或最终输出中，形状的填充、路径、笔触、位置和变换属性的定义在哪里？

在此处输入图像描述

在 DOM 中的某处，有一些东西定义了以蓝色突出显示的形状的属性，赋予它老虎胡须的白色填充和路径定义。这些数据在哪里，我如何访问它？

如果在 IE8 中无法按原样使用，那么涉及插件、工具栏或非 IE8 VML 处理器的答案总比没有好。如果有办法在 IE 的超旧版本中做到这一点，那很好，它们都可以通过http://modern.ie自由合法地获得用于测试目的

4

2 回答 2

2

更新：似乎在 IE11 设置为 IE8 模式时，如果您记录 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，并记录要检查其 VMLconsole.log();的 Raphael 对象。
  3. 在 Firebug Lite 控制台中，单击相应的绿色Raphaël’s object { }条目

  4. 展开node- 这是实际的 VML，因为它实际上在页面上。要查看的特定属性：

    • outerHTML包含 XML 格式的 VML 路径定义和大多数其他属性
    • offsetLeft,offsetTop
    • currentStyle包含height, width, left, top; 还有runtimeStyle（style似乎与IE开发工具中显示的不可靠数据相同）
    • 我在任何地方都找不到填充或描边数据（包括 fill.rvml 和 stroke.rvml 子项），除了在 XMLouterHTML

请注意，如果您想轻松地将实际 VML 输出与 Raphael 对象属性进行比较，您可以查看 Raphael 对象的属性attrs( path, fill, stroke, path...) 和matrix旁边node，然后paper返回父 Raphael 纸对象。

因此，记录 Raphael 对象通常比记录更好console.log(someRaphObject.node);，这样您就可以通过 Raphael 对预期结果与 VML 中的实际结果进行并排比较。

关于 Firebug Lite 和 IE 的重要说明 - 它可能会弄乱正常的 IE 开发工具控制台。一些方法来解决这个问题。

于 2013-07-10T12:18:30.673 回答
1

我猜这里的问题是 IE8 的开发工具，而不是 DOM 不正确（毕竟，VML 显示正确），所以让我们沿着这条路走，考虑查看 DOM 的替代方法使用更好的工具包。

  1. 我不是兼容模式的粉丝，但在这种情况下可能值得考虑。鉴于 IE10 的开发工具比 IE8 中的开发工具强大得多，您是否在 IE10 的 IE8-compat 模式（甚至 IE7-compat 模式）下尝试过这个？它会在这种模式下使用 VML，就像 IE8 的普通副本一样，但是您将拥有可用的 IE10 开发工具，这比 IE8 中的要好得多，因此您可能能够更好地了解正在发生的事情。

  2. 另一种选择是使用Firebug Lite，它是 Firefox 开发工具 Firebug 的精简版，可在任何浏览器上运行。我已经有一段时间没有使用它了，因为所有其他浏览器现在都有足够好的开发工具，它并不是真正需要的，但它是一个不错的小实用程序，对于浏览 DOM 尤其有用，这就是你在这种情况下想要的. 在这种特定情况下，它可能比 IE8 自己的内置开发工具更强大。

希望这些想法是有帮助的。

但最后一个想法：

您提到您正在尝试编写“单独的代码以使该功能在 'SVG mode' 和 'VML mode' 下工作。

我对此感到困惑，因为您使用的是 Raphael，而 Raphael 的全部意义在于它为您执行此操作；开发人员只需写入 Raphael 对象，Raphael 处理 VML 或 SVG 的单独代码分支。鉴于此，我不确定您为什么觉得需要编写自己的 SVG/VML 代码路径。

但作为补充一点，如果您要编写 VML 代码，我注意到您讨论了这与 IE7 和 IE8 兼容，所以我应该警告您，VML 语言在这两个 IE 版本之间发生了显着变化。同样，Raphael 在内部对开发人员透明地处理这些差异，但如果您手动编写 VML 代码，则需要注意这些差异。您可以在此处阅读一些相关信息：http: //ajaxian.com/archives/the-vml-changes-in-ie-8

于 2013-07-09T16:12:41.580 回答