javascript - 多个 svg 在 Canvas 上分层，让 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 的区别。

attr 用于属性对

style用于css样式。

在浏览器大战的日子里，它们有些困惑，但现在，我们对此有了更好的标准。