Hi Jeff, Thanks for answering promptly, but your answer cannot be correct. I have found numerous references on the web to using SVG in HTML5 and besides it does partially work: it renders the SVG shapes, but does not rescale them correctly. (This is consistent in all the browsers you mention - except I do not have Opera to test against).
I can confirm that your stripped down file does work correctly as a .xhtml file, but not as an .html file. My full example does not work correctly when renamed to .xhtml, so that is not an easy solution! My file has the following headers: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> When I added these headers to your file, it now works as a ".html" file (with correct stretching). Given this, I now think the problem must be the way my code is parsing the SVG code from a text string in javascript: svgDoc = new DOMParser().parseFromString(svgText, "application/xml").documentElement; var el = document.importNode(svgDoc, true); I need to do more investigation. Thanks again for the reply which hopefully has me thinking in the right way! - John --- In svg-developers@yahoogroups.com, Jeff Schiller <codedread@...> wrote: > > 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 <john.hind@...> 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: svg-developers-unsubscr...@yahoogroups.com -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: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
