Question

112

Set X and Y value for g element of SVG

rated 0 times [ 116] [ 4] / answers: 1 / hits: 18412 / 6 Years ago, wed, may 30, 2018, 12:00:00

I am relatively new in SVG drawing with HTML5.

What I want to do is to make a group of elements in SVG with g element so that all elements inside of that g element can work like a group and all the element's base x and y value can be received from the upper g element.

So, what I have done is something like this-

<svg width=500 height=300 xmlns=http://www.w3.org/2000/svg>

  <g x=1000 y=1000>

    <title>SVG Title Demo example</title>

    <rect width=200 height=50

    style=fill:wheat; stroke:blue; stroke-width:1px/>

    <text style=text-anchor: middle; class=small>My Text</text>

  </g>

</svg>

What I expected is all the elements inside the g element will get x=1000 and y=1000 so my expected output is like this-

But I am getting this-

Re-

I don't like to set x and y element in text element. I just want to set relative x and y into the text element if needed, but that should be relative to g element.

Can anyone help me what I need to do to achieve my target with a group in SVG?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kamronr

Add To Favorites

Follow

Total Points: 749

Total Questions: 110

Total Answers: 122

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

kamronr questions

1 How to enforce semicolon in Typescript interface

Mon, Dec 21, 20, 00:00, 3 Years ago

1 Jest - How do I reset object state for each test?

Fri, Oct 16, 20, 00:00, 4 Years ago

1 Change (Add/Remove) CSS Class On Mobile With JS or jQuery

Sat, Oct 3, 20, 00:00, 4 Years ago

1 Don't allow horizontal scroll when scrolling vertically (and vice versa)

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to extract text from PDF?

Sun, Jul 28, 19, 00:00, 5 Years ago

View All

answered 6 Years ago maxh · Accepted Answer

<g> elements don't support x or y attributes. You can use a transform instead though.

I've decreased the values from 1000 to 100 as otherwise the output is outside the 500 x 300 canvas of the outer <svg> element.

I've provided additional x and y attributes on the text element so it appears positioned as in your example. If wanted you could put the text itself in a <g> element or an <svg> element.

<svg width=500 height=300 xmlns=http://www.w3.org/2000/svg>

  <g transform=translate(100, 100)>

    <title>SVG Title Demo example</title>

    <rect width=200 height=50

    style=fill:wheat; stroke:blue; stroke-width:1px/>

    <text x=100 y=30 style=text-anchor: middle; class=small>My Text</text>

  </g>

</svg>

or using an additional <g> element to avoid x and y on the text itself.

<svg width=500 height=300 xmlns=http://www.w3.org/2000/svg>

  <g transform=translate(100, 100)>

    <title>SVG Title Demo example</title>

    <rect width=200 height=50

    style=fill:wheat; stroke:blue; stroke-width:1px/>

    <g transform=translate(100, 30)>

        <text style=text-anchor: middle; class=small>My Text</text>

    </g>

  </g>

</svg>

Alternatively you could use an inner <svg> element instead of a <g> element as that does support x and y attributes

<svg width=500 height=300 xmlns=http://www.w3.org/2000/svg>

  <svg x=100 y=100>

    <title>SVG Title Demo example</title>

    <rect width=200 height=50

    style=fill:wheat; stroke:blue; stroke-width:1px/>

    <text x=100 y=30 style=text-anchor: middle; class=small>My Text</text>

  </svg>

</svg>