CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
AlexJaa
AlexJaa

Reputation: 389

Zoomable inline SVG

I have an inline SVG inside a div and simply I want to make it zoomable and able to pan using drag. I've search everywhere and found nothing that suits my needs. I dont want .svg files or whatever. Just an inline SVG inside a div.

I found this thing but it freeze my brain. I don't get it. But the demo in this link suits my needs. But I don't get it. Please if anyone have an idea how to achieve that one thanks a lot in advance. I tried my best that I come up with asking here guys. I'm new to SVG so please be patient with me. :)

Upvotes: 1

Views: 871

Answers (1)

Roshan
Roshan

Reputation: 2184

All the things that you are doing in your HTML file can be done using d3 .For reference read this

In my example i have simply taken one circle and zooming it

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 is

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

Fiddle Here

Now what actually we are doing is that we are appending svg in a div using d3 and applying zoom behaviour there.

Upvotes: 4

Related Questions