CODEWITHSUNDEEP
javascriptcsshtmlsvg
Anup
Anup

Reputation: 123

Html5- Organization hierarchy structure drawn using SVG path getting clipped on left hand side

I am working on creating a Organization tree hierarchy like structure(attached screenshot below) using Html5 and SVG, I wanted the structure to be aligned at the center but its getting aligned to the left due to which two branches which were aren't visible. I am missing adding any property here? so that I can draw the structure and nothing gets cropped!

Current code can be seen at : https://jsfiddle.net/wsLzLum5/2/

 ![Screenshot][1]


  [1]: https://i.sstatic.net/qvt0S.png

Upvotes: 0

Views: 411

Answers (1)

paul
paul

Reputation: 22021

The lowest x-coordinates in your path is -263, yet you have specified that your view box only extends from 0 to 615 in this dimension.

Either extend your viewbox:

<svg version="1.1" viewbox="-300 0 615 455" style="width: 615px; height: 600px;">

or modify the path coordinates such that they are all within the 0-615 range.

Upvotes: 1

Related Questions