透视变换仅适用于 svg 标签而不适用于 g 或图像

Question

我正在开展一个项目，该项目涉及对图形进行一系列透视转换，用户最终将能够在其中导航。我一直在为我在this code 的帮助下开发的转换制作原型

基本上，我有 4 个点，我使用 numberic.js 函数计算矩阵，然后将 matrix3D css3 转换应用于 svg 元素。

你可以看到转换工作here（点击转换按钮）（下面是简化的 js 代码）。问题是，如果我将转换应用于 g 标签、SVG 内部或图像，那么转换就会出错，我不知道为什么。

var margin = {top: 152.5, right: 200, bottom: 152.5, left: 200},
    width = 700 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var sourcePoints = [[0, 0], [width, 0], [width, height], [0, height]],
    targetPoints = [[225.201, 48.411], [1188.39, 185.159], [1869.12, 892.339], [217.525, 231.14]];

var svgTransform;

var transform = ["", "-webkit-", "-moz-", "-ms-", "-o-"].reduce(function(p, v) { 
        return v + "transform" in document.body.style ? v : p; 
    }) + "transform";

function transformed() {  
  for (var a = [], b = [], i = 0, n = sourcePoints.length; i < n; ++i) {
    var s = sourcePoints[i], t = targetPoints[i];
    a.push([s[0], s[1], 1, 0, 0, 0, -s[0] * t[0], -s[1] * t[0]]), b.push(t[0]);
    a.push([0, 0, 0, s[0], s[1], 1, -s[0] * t[1], -s[1] * t[1]]), b.push(t[1]);
  }

  var X = numeric.solve(a, b, true), matrix = [
    X[0], X[3], 0, X[6],
    X[1], X[4], 0, X[7],
       0,    0, 1,    0,
    X[2], X[5], 0,    1
  ].map(function(x) {
    return d3.round(x, 6);
  });

  svgTransform.style(transform, "matrix3d(" + matrix + ")");
}

function reset() {
    targetPoints = [[0, 0], [width, 0], [width, height], [0, height]];
    transformed();
    targetPoints = [[225.201, 48.411], [1188.39, 185.159], [1869.12, 892.339], [217.525, 231.14]];
}

function initialize() {
    svgTransform = d3.select("#vis").append("svg")
        .attr("width", $("#vis").width())
        .attr("height", $("#vis").height())
        .style(transform + "-origin", 0 + "px " + 0 + "px " + 0 + "px");

    svgTransform.append("g")
        .append("image")
        .attr("xlink:href", "http://i.imgur.com/RqtyZjC.png")
        .attr("width", width)
        .attr("height", height);

    $("button.transform").click(function(evt) {
        evt.stopPropagation();
        transformed();
    });
    $("button.reset").click(function(evt) {
        evt.stopPropagation();
        reset();
    });   
}

initialize();

在最终产品中，我将转换多个图像，并且使用此解决方案，我必须为每个图像创建一个 svg 标记。这会使事情变得复杂，因为我想要在可视化上使用填充和缩放选项。

我也尝试过仅使用 div 来执行此操作，它也可以正常工作（小提琴 here），但我想使用 SVG 的原因是为了方便用户界面的创建以及缩放和平移的使用。

任何比我更有经验的人都能弄清楚为什么转换在 svg 中不起作用？

如果将转换应用于 SVG 内的 g 或 image 标签，下面是一张结果图片。

提前感谢您的帮助！

Answer 1

将 CSS 3D 转换应用于最外层的 <svg> 元素是安全的，就像对任何 HTML 元素一样。但是浏览器对 SVG 子元素的 3D 转换的支持仍在开发中，目前还不可靠。描述它的规范 (http://www.w3.org/TR/css3-transforms/#svg-three-dimensional-functions) 仍然只是一个工作草案。现在避免它可能是有意义的。