CODEWITHSUNDEEP
htmlsvg
A_user
A_user

Reputation: 2157

How to place two <g> side by side in an svg?

Hello all I am new to html5 and svg tag.I want to ask a question about svg html element. Here is my code

<html>
 <div>
   <svg width = "1335" height = "400">
     // I want to have two svg:g side by side one of more width and second of less width
        such that width of svg = first g + second g
      <g>
          // All the elements inside g should have same width as g
      </g>
      <g>
      </g> 
   </svg>
 <div>
</html>

I have tried it using transform.But failed. Is it possible to have two g elements side by side as I can't set x and y of g ? Can any one guide me of doingthis another way.

Upvotes: 1

Views: 4775

Answers (4)

Mjachowdhury
Mjachowdhury

Reputation: 81

the simple example of how to do Irish flag by SVG 

<!DOCTYPE html>
<html>
    <body>
        <h1>Irish Flag SVG image</h1>
        <svg version="1.1"
             baseprofile="full"
             width="300" height="200"  
             xmlns="http://www.w3.org/2000/svg">

            <!--creating rect side by side for irish flag -->
            <rect x="0" y="0" width="300" height="200" fill="green"/>
            <rect x="100" y="0" width="300" height="400" fill="white"/>
            <rect x="200" y="0" width="300" height="400" fill="orange"/>
        </svg>

    </body>
</html>

Upvotes: 0

hobs
hobs

Reputation: 19259

If you just enclose each <g> in a separate SVG tag, and then close the set of SVG fragments within a <section> tag, the renderings with lay out just like images...flowing to the right and wrapping for me and my CSS--I can disect the CSS to figure out how/why if you really need that.

Upvotes: 0

CapelliC
CapelliC

Reputation: 60024

You can use a transform, the problem then is how to get such values that make the transformed g at the right place. A possible way (the simplest, really) is to get the difference between coordinates of bounding boxes. Say you have a bounding box BB1 for group G1 and BB2 for G2, you could compute a translation to be applied to G2.

Of course we need a script to do that computation runtime. Such script will use

var BB1 = document.getElementById("G1").getBBox()

Here the code

<svg>
    <script>
        function align(evt) {
            var G1 = document.getElementById("G1")
            var G2 = document.getElementById("G2")
            var BB1 = G1.getBBox()
            var BB2 = G2.getBBox()
            G2.setAttribute("transform", "translate("+ ((BB1.x+BB1.width)-BB2.x) + " " + ((BB1.y+BB1.height)-BB2.y) + ")")
        }
    </script>                
    <g id="G1">
        <rect fill="red" x="10" y="10" width="40" height="30" />
    </g>
    <g id="G2" onclick="align(evt)">
        <rect fill="blue" x="70" y="60" width="100" height="50" />
    </g>
</svg>

you can experiment on jsFiddle with it

Upvotes: 3

robertc
robertc

Reputation: 75707

The <g> element doesn't have a position or a size, that's why you can't set x and y, it's just a logical container. Also SVG doesn't really have concept of layout in the same way as HTML does, which is what it looks like you're trying to achieve. If you want two elements next to each other, just draw them next to each other:

<svg width = "1335" height = "400">
    <rect x="0" y="0" width="667" height="400" fill="#0f0"/>
    <rect x="668" y="0" width="667" height="400" fill="#00f"/>
</svg>

Upvotes: 0

Related Questions