0

I have drawn border around my svg element and then inside that svg element is g element. I am not sure why g element is NOT starting from the extreme left corner of the svg ? IMHO, the g must be starting from 0,0 of the svg element but don't know why it is displaced.

Similarly if i forcefully set g to width/2 and height/2, its starting point does not go to center of the svg but somewhere a head of it.

Looking forward thanks.

enter image description here

Similarly see the next figure, g is at (350, 250) after translation but this does not look at the center of the svg. Note 350 and 250 are the half of the svg which is(700 and 500).

enter image description here

Muhammad Ali Ahsan
  • 69
  • 1
  • 6
  • 2
    Please add markup as text in the question and not as images. – Robert Longson Jan 14 '20 at 09:40
  • 1
    You will need to add to the g a transparent rect starting from the extreme left corner of the svg. Otherwise the group starts where the leftmost element in the group starts. In javascript you can use `getBBox()` to get the position and the size of the group. – enxaneta Jan 14 '20 at 10:20
  • 1
    A group is merely a container for the elements inside, it does not have dimensions on its own nor is there a way to explicitly position the `g` element. The only way to manipulate the group's coordinate system is by applying a `transform` on it. Related: [*How does one get the height/width of an SVG group element?*](/questions/7620509). – altocumulus Jan 14 '20 at 10:41
  • 1
    @enxaneta Thank you so very much. It make sense and I have changed the code and it seems to be behaving as expected. Thanks again. – Muhammad Ali Ahsan Jan 14 '20 at 11:15
  • @altocumuls. Thank you. You are right. – Muhammad Ali Ahsan Jan 14 '20 at 11:15
  • @RobertLongson. Thanks. I'll be careful next time. – Muhammad Ali Ahsan Jan 14 '20 at 11:15

0 Answers0