CODEWITHSUNDEEP
javascriptangularjsd3.jssvg
Khan Hafizur Rahman
Khan Hafizur Rahman

Reputation: 105

Draw polygon inside of the SVG defined viewport

I define width & height of the viewport of svg 580 and 707 respectively. The width and height of viewBox are defined 450 and 600. Inside the svg I draw some responsive polygons which points are given by a user and render the polygon using d3 immediately.

If the user given input is large enough to draw the polygon beyond the viewport width for example then portion allocated within the width are shown to the web page and rest are not. How can I render the whole polygon inside my defined viewport?

Update: Here is jsfiddle link: https://jsfiddle.net/riad1380/ww1xpnxy/

var viewBoxWidth = 580;
var viewBoxHeight = 707;

For example, if a user gives 350 in radius value, it renders outside of the viewport but I want to draw the circle within the viewport irrespective of given radius and also circle having radius 10 should be viewed smaller than 100.

Upvotes: 1

Views: 335

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

You'll need to update the viewBox so it covers everything that is in the SVG.

So if the user enters a radius of 350 the width and height values of the viewBox would need to at least be 700 if you want the whole circle to be visible. Depending on the position (cx and cy) of the circle, you may need to update the x and y values of the viewBox also.

Upvotes: 1

Related Questions