SVG缩放和平移Javascript

SVG缩放和平移Javascript,javascript,svg,Javascript,Svg,所以,我发现了一个可以在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(

所以,我发现了一个可以在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文件路径呢?提前感谢。

查找panzoom.min.js或SVGPAN.js

然后只包含脚本调用。“脚本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>


您没有。此代码生成SVG,您可以将其更改为生成自己的SVG,但它不接受预先编写的SVG文件作为输入。好的,关于从何处获取可以放大我已存储文件的内容的任何提示?@Nub如果这对您有效,请接受它作为答案。