Перспективное преобразование работает только с тегом svg, а не с g или изображением

Question

Я работаю над проектом, который включает в себя серию перспективных преобразований на рисунках, где пользователь в конечном итоге сможет перемещаться по ним. Я работал над прототипом преобразований, которые я разрабатывал с помощью this code

В принципе, у меня есть 4 точки, из которых я вычисляю матрицу с помощью функции numberic.js, а затем применяю матрицу 3D 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(); 

На конечном продукте я уже несколько imagens преобразованной и с этим решением, я должен создать SVG тег для каждого из них. Это усложнит ситуацию, так как я хочу добавлять и изменять масштаб визуализации.

Я также пытался сделать это с помощью только div, и он также отлично работает (скрипка here), но причиной, по которой я хотел использовать SVG, было упрощение создания пользовательского интерфейса и использование масштабирования и панорамирования.

Любой более опытный, чем я, может понять, почему преобразования не работают внутри svg?

Bellow - это изображение результата, если преобразование применяется к знаку g или изображения внутри SVG.

Заранее спасибо за вашу помощь!

Answer 1

Безопасно применять CSS 3D-преобразования к внешним элементам <svg>, так же, как и любой элемент HTML. Но поддержка браузера для 3D-преобразований дочерних элементов SVG все еще находится в разработке и в настоящее время ненадежна. Спектр, который описывает его (http://www.w3.org/TR/css3-transforms/#svg-three-dimensional-functions), по-прежнему остается рабочим проектом. На данный момент может быть разумным избежать этого.