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

Posted by A_user on Stack Overflow See other posts from Stack Overflow or by A_user
Published on 2012-07-04T07:37:27Z Indexed on 2012/07/04 9:16 UTC
Read the original article Hit count: 142

Filed under:

html5

|

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.

© Stack Overflow or respective owner

Related posts about html5

Is there a HTML5 Validator plugin for Firefox?

as seen on Super User - Search for 'Super User'
Is there a plugin for firefox to validate HTML 5? I've always used this but if my webpage has a <!DOCTYPE HTML> doctype it complains about it not having a doctype at all. >>> More
HTML5 video tag in chrome - wmv

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi Al, I need to make a page which displays a video. Firefox and and Opera support the OGG format, no problem there. Chrome is ... "stupid" and does not recognize OGG. Does Chrome on Windows know how to handle WMV? I already have them encoded, and no I cannot recode new videos since the media is… >>> More
HTML5 cache manifest: whitelisting ALL remote resources?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm doing an iPhone version of a desktop site that includes a blog. The blog often embeds images from other domains (the image URLs always start with http:// in this case, obviously), but because I'm using cache-manifest, these images don't load because they aren't declared in the manifest file. I… >>> More
Learning HTML5 - Sample Sites

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Part of the challenge with HTML5 is understanding the range of different technologies and finding good samples. The following are some of the sites I have found most useful. IE TestDrive http://ie.microsoft.com/testdrive/ A good set of demos using touch, appcache, IndexDB, etc… >>> More
Online video tutorials for HTML 5

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Here are some of the best introductory HTML5 videos I have found online/for free. Mix 2011: HTML5 for Skeptics - Scott Stansfield channel9.msdn.com/Events/MIX/MIX11/EXT21 Filling the HTML5 Gaps with Polyfills and Shims - Ray Bango channel9.msdn.com/Events/MIX/MIX11/HTM04 50 Performance… >>> More

Related posts about svg

Firefox -- Dynamically embedding <svg> element in SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected: <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> </svg> However… >>> More
manipulate objects outside svg with javascript-function inside the svg

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello! I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible. Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call… >>> More
javascript replace text with images problem

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!! Basically, I'm trying to change every instance of a card… >>> More
SVG Salamander example?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there. I'm toying with Java and SVG Salamander but cant quiet get how to render a simple SVG file into a Jpanel. Could someone give me a brief example? Tried to follow the loose tutorial in the official site, but could not find a simple code to get a better understanding. So, some code is really… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More