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

Question

我正在开发一个项目，该项目涉及对图形进行一系列透视变换，用户最终将能够在它们中导航。我一直在开发一个转换原型，我一直在这段代码的帮助下开发该原型

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

您可以在此处看到转换工作（点击转换按钮）（简化的 js 代码如下）。问题是，如果我将转换应用于 SVG 内部的 g 标签或图像，则转换会出现错误，我无法弄清楚为什么。

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 来完成此操作，它也工作得很好（在这里小提琴），但我想使用 SVG 的原因是为了方便用户界面的创建以及缩放和平移的使用。

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

下面是如果将变换应用于 SVG 内的 g 或图像标签的结果图片。

在此先感谢您的帮助！

Answer 1

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