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

然后只包含脚本调用。 “script 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 Zoom和Pan Javascript

1 个答案: