IE 8/9 的变换矩阵问题答案

【问题标题】：Transform matrix issue with IE 8/9IE 8/9 的变换矩阵问题
【发布时间】：2014-01-18 12:28:02
【问题描述】：

我正在尝试在我的网页上获取 SVG 对象的变换矩阵。这是我用来确保它被四个 CSS 转换属性之一拾取的当前语句：

$("#printdiv svg").each(function(){

    var webkitMatrix = false;

    var transform = $(this).css("transform");

    if (transform == null || transform.indexOf("matrix") == -1)
       transform = $(this).css("-ms-transform");

    if (transform == null || transform.indexOf("matrix") == -1)
        transform = $(this).css("-moz-transform");

    if (transform == null || transform.indexOf("matrix") == -1){
        transform = $(this).css("-webkit-transform");
        webkitMatrix = true;
    }

    /* do stuff with matrix */

});

（我有一个 var "webkitMatrix" 的原因是因为如果为真，该函数必须以不同方式解析 -webkit-transform 矩阵）

我的问题是（就像我所做的大多数事情一样）IE10、Chrome 和 FireFox 可以很好地拾取矩阵，但 IE 8/9 不能。

在这里您可以看到在 IE9 模式/标准和 FireFox（最新）下使用 IE10 时将每个 CSS 属性打印到控制台的结果：（此处为大版本：http://i.stack.imgur.com/g07q4.png）

有什么我可以使用的，可能是filter: 或其他转换属性，以便我可以获取我的 SVG 信息？

【问题讨论】：

IE8 不支持 SVG 也不支持 CSS 转换。如果你能提供一个工作小提琴，它会更容易排除故障。
我不能，因为这是我工作场所的项目。抱歉，我无法提供小提琴或其他代码。
首先，jQuery 自己处理供应商前缀。其次，afaik IE 不支持对 svg 对象进行 css 转换。
完全没有？它呈现 SVG，我只需要信息。是否有任何替代获取信息而不是为 IE 转换的方法？

标签： css internet-explorer matrix svg css-transforms

【解决方案1】：

IE9

您可以像这样解析 SVG 矩阵：

svgElement = document.getElementById("mySVG_ID");
var matrixIE = new Array();
matrixIE[0] = svgElement.createSVGMatrix().a;
matrixIE[1] = svgElement.createSVGMatrix().c; //C and B are switched
matrixIE[2] = svgElement.createSVGMatrix().b;
matrixIE[3] = svgElement.createSVGMatrix().d;
matrixIE[4] = $("#mySVG_ID").css("left");
matrixIE[5] = $("#mySVG_ID").css("top");

IE8

对于不兼容的浏览器，Leaflet 使用 VML 对象而不是 SVG 对象。 VML 元素具有类名.leaflet-vml-shape。因为我依靠html2canvas 来将我的页面呈现为图像，而html2canvas 在IE8 下不起作用，我没有理由研究如何解析VML 矩阵。

【讨论】：