在画布上分层的多个svg，让svg可移动并调整大小

Question

正如我们所看到的，div可以拖动，可以使用javascript调整大小。 http://jqueryui.com/draggable/

svg也是html元素， 难道我用css + jquery拖动，调整SVG。

这里，svg是整个svg，而不是svg元素的孩子。

我知道我是否可以使用svg元素组（g）进行翻译。但是svg没有改变，位置没有改变。

我试过设置left,top。我也试过设置x,y。

var svg = d3.select("body").append("svg") 
            .attr("left", 200) 
            .attr("top", 200); 
            .attr("width", 200) 
            .attr("height", 200); 



var svg = d3.select("body").append("svg") 
          .attr("x", 200) 
          .attr("y", 200); 
          .attr("width", 200) 
          .attr("height", 200); 

是否有可能使其可拖动和可调整大小？

Div是一个DOM元素，它可以调整大小，拖动。

svg也是一个Dom元素，它可以调整大小和拖动吗？

虽然，我仍然有上述问题，谢谢大家Alvin K：它解决了我的问题：http://jsfiddle.net/ynternet/bf3zck06/1/

感谢您的时间。

Answer 1

用于缩放和拖动的演示：http://plnkr.co/edit/sSXYpwjvVB8m1GVuE40A?p=preview var svg = d3.select（“＃chart1”）。append（'svg'）;

svg.attr("width", 200) 
    .attr("height", 200) 
    .attr("viewBox", "0 0 200 200"); 

var circle = svg.append('circle') 
    .attr({ 
    r: 30, 
    cx: 100, 
    cy: 100 
    }) 
    .style({ 
    fill: "green", 
    stroke: "red" 
    }); 
var open = false; 
circle.on('click', function(e) { 
    open = !open; 
    if (open) { 
    svg.attr("viewBox", "0 0 200 200"); 
    } else { 
    svg.attr("viewBox", "0 0 400 400"); 
    } 
}) 


circle.on("mousemove", function() { 
    circle.attr("cx", d3.mouse(this)[0]); 
    circle.attr("cy", d3.mouse(this)[1]); 
});  

是的，你应该可以像其他DOM那样工作。

如果您使用的是d3，d3完全可以调整大小和缩放比例。不需要涉及jQuery来使事情更加复杂。你可以将你的代码附加到jsbin或plunker中

顺便说一句，你需要了解d3selection.attr和d3selection.style的不同。

属性用于属性对

样式用于css样式。

在浏览器的战争日子里，他们有点乱，但现在，我们有更好的标准。