javascript - SVG 缩放和平移 JavaScript

Question

所以，我找到了一个在 SVG 中缩放和平移的代码，但由于我只是一个新手，所以我不知道要替换什么代码，以便我可以在自己的 SVG 文件中缩放和平移。

var width = 960,
        height = 500;

var randomX = d3.random.normal(width / 2, 80),
        randomY = d3.random.normal(height / 2, 80);

var data = d3.range(2000).map(function() {
    return [
        randomX(),
        randomY()
    ];
});

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

svg.append("rect")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height);

svg.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("r", 2.5)
        .attr("transform", function(d) { return "translate(" + d + ")"; });

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

我确实意识到，首先它会创建一个带有点的随机 svg，因此我显然不需要这些代码，但是我在哪里输入我自己的 SVG 文件路径？提前致谢。

Answer 1

查找 panzoom.min.js 或 SVGPAN.js

https://code.google.com/p/svgpan/downloads/list

然后只需包含脚本调用即可。 “脚本 xlink:href="SVGPan.js"

这将允许您平移和滚动缩放。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
 <g style="fill: #ffffff; stroke:#000000; stroke-width:0.172">
    <g visibility="visible">
    <polygon stroke="Black" stroke-width=".1" fill="MediumTurquoise" points="543.964566929134,281.534776902887 537.240485564304,281.534776902887 537.240485564304,287.534776902887 543.964566929134,287.531167979003 " />
    <line stroke="MediumOrchid" stroke-width=".1" stroke-opacity="1" x1="473.240157480315" y1="293.472112860892" x2="473.240157480315" y2="291.972112860892" />
    </g>
 </g>
</g>
</svg>