Zoomable内联SVG

Question

我在SVG中有一个内联div，只是我希望使用drag 可扩展并能够平移 }。我到处搜索，发现任何不符合我需求的东西。我不想要.svg个文件或其他什么。只是SVG内的div内联。

我找到了这个东西，但它冻结了我的大脑。我不明白。但是link中的演示符合我的需求。但我不明白。如果有人知道如何实现这一点，请提前多多感谢。我尽我所能，想出来问这些家伙。我是SVG的新手，所以请耐心等待我。 ：）

Answer 1

您在HTML文件中执行的所有操作都可以使用d3完成。参考读取this

在我的例子中，我只是采用了一个圆圈并进行了缩放

var svg = d3.select("#mydiv").append("svg")
    .attr("width", 500)
    .attr("height", 1000)
      .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
      .append("g");

var circle = svg.append("circle")
                         .attr("cx", 70)
                         .attr("cy", 200)
                         .attr("r", 20);

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

HTML

<div id="mydiv">
</div>

Fiddle Here

现在我们正在做的是我们使用d3在div中附加svg并在那里应用缩放行为。