SVG Zoom and Pan Javascript

Итак, я нашел код, который масштабирует и панорамирует в SVG, но так как им просто новичок, я не могу понять, какой код заменить, чтобы я мог масштабировать и панорамировать в моем собственном файле SVG.SVG Zoom and Pan Javascript

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 FilePath? Заранее спасибо.

источник

2015-07-01 Chris Rosenlind

Вы не Этот код создает SVG, вы можете изменить его, чтобы создать свой собственный, но он не принимает предварительно записанный файл SVG в качестве входных данных. –

Хорошо, какие-нибудь подсказки о том, где искать, чтобы получить что-то, что может увеличить размер файлов, которые я уже сохранил? –

Поиск в 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>

источник

2015-07-02 14:29:40 MatthewD

@Nub Если это сработало для вас, пожалуйста, примите его как ответ. – MatthewD

SVG Zoom and Pan Javascript

ответ

Смежные вопросы