This file saved as .xhtml works for me in Chrome, Safari, Firefox, and Opera:
<?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml";> <body> <span class="image"> <svg xmlns="http://www.w3.org/2000/svg"; version="1.1" width="1000px" height="110px"> <svg viewBox="0 0 194 102" preserveAspectRatio="none"> <g> <rect id="svg_1" height="97" width="189" y="2.5" x="2.5" stroke-width="5" stroke="#000000" fill="#FF0000"/> <ellipse ry="19" rx="93.5" id="svg_2" cy="52.5" cx="97" stroke-width="5" stroke="#000000" fill="#ffff00"/> </g> </svg> </svg> </span> </body> </html> The rectangle and ellipse fill up the 1000x110 region defined by the outer SVG. Note that sadly Firefox 3.6-, Safari 5- and Opera 11.10- do not support SVG-in-HTML5 yet so you have to go the XHTML route. Regards, Jeff On Fri, Mar 18, 2011 at 9:23 AM, johnhind12 <[email protected]> wrote: > > > Hi! > I'm just starting with SVG and tearing my hair out because it is ignoring > my attempts to scale an image. I have an SVG 'island' within my DOM as > follows: > > <span class="image"> > <svg xmlns="http://www.w3.org/2000/svg"; version="1.1" width="1000px" > height="110px"> > <svg viewBox="0 0 194 102" preserveAspectRatio="none"> > <g> > <rect id="svg_1" height="97" width="189" y="2.5" x="2.5" stroke-width="5" > stroke="#000000" fill="#FF0000"/> > <ellipse ry="19" rx="93.5" id="svg_2" cy="52.5" cx="97" stroke-width="5" > stroke="#000000" fill="#ffff00"/> > </g> > </svg> > </svg> > </span> > > My understanding of this is that it should scale the rectangle and elipse > to fill the dimensions of the outer SVG element. But it does not, the shapes > remain the size specified regardless of the outer SVG width and height. If > the width and height are set less than 194x102, then the shapes are clipped > to the size specified. > > What am I missing here? Note that I have tried it in numerous modern > browsers and I have also tried numerous variations including eliminating the > inner SVG element and adding its attributes to the outer. One clue is I > tried replacing the viewBox attribute with 'transform="rotate(90)"' but that > has no effect either so it seems transforms are being ignored altogether. > > Please help me if you can! > > > [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
