Hi, I am observing strange behaviour regarding apperance of scrollbar in an embed element containing SVG. Firefox 4 (beta 8 ) and Opera (10.50) behave in one way and Chrome 8.0.552 in another way. Following is the scenario with the expected result and the actual result
I want to embed four svg content in my html in a 2x2 grid without being aware of the content in the svg. 1) Now I set the size of the four blocks by using the style propery and setting the width and height on the embed element and expect the the scrollbars to appear so that the full svg content can be seen by scrolling if the content does not fit in the area specified in the embed element. I even set display as block and overflow property to auto/scroll. 2) In opera and firefox what is observed is that setting the CSS style of width/height restablishes the viewport of the SVG causing the svg content to scale, but this is not observed in Chrome. So how can I set my SVG viewable area without causing the SVG to scale 3) Scrollbars do appear if I do not set the width and height using the CSS style which is when the dimension defaults to 300x150 but as soon as use the width and height CSS style properties the scrollbars vanishes Following is my small piece code ( 1 html and 4 svgs for four blocks in the grid ) Can someone guide how I can get four embedded svgs whose content are scrollable and the parent html decides the viewable area Regards Raks A ---------------------------------- studio.html ---------------------------------- <html xmlns="http://www.w3.org/1999/xhtml";> <body id="body" bgcolor="#545454"> <div id="row1"> <embed id="col1" style="display:block;height:150;width:200;float:left;background-color:#c0c0c0" src="Block1.svg" type="image/svg+xml"> <embed id="col2" style="float:left;background-color:#c0c0c0" type="image/svg+xml" src="Block2.svg" /> </div> <div id="row2" style="clear:both"> <embed id="col1" style="background-color:#d3d3d3;display:block;float:left" type="image/svg+xml" id="tools" src="Block3.svg" /> <embed id="col2" style="display:block:overflow:auto;height:500;width:500;background-color:#d3d3d3;float:left;" id="canvas" src="Block4.svg" /> </div> </body> </html> ------------------------------- Block1.svg ------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd";> <svg baseProfile="tiny" display="inherit" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events"; height="1000px" width="1000px" viewBox="0 0 1000 1000"> <rect x="0" y="0" width="900" height="20" fill="#ffff00"/> <rect x="0" y="20" width="200" height="20" fill="#ff0000"/> <rect x="0" y="40" width="200" height="20" fill="#ffff00"/> <rect x="0" y="60" width="200" height="20" fill="#ff0000"/> <rect x="0" y="80" width="200" height="20" fill="#ffff00"/> <rect x="0" y="100" width="200" height="20" fill="#ff0000"/> <rect x="0" y="120" width="200" height="20" fill="#ffff00"/> <rect x="0" y="140" width="200" height="20" fill="#ff0000"/> <rect x="0" y="160" width="200" height="20" fill="#ffff00"/> <rect x="0" y="180" width="200" height="20" fill="#ff0000"/> <rect x="0" y="200" width="200" height="20" fill="#ffff00"/> <rect x="0" y="220" width="200" height="20" fill="#ff0000"/> <rect x="0" y="240" width="200" height="20" fill="#ffff00"/> <rect x="0" y="260" width="200" height="20" fill="#ff0000"/> <rect x="0" y="280" width="200" height="20" fill="#ffff00"/> <rect x="0" y="300" width="200" height="20" fill="#ff0000"/> </svg> ---------------------------- Block2.svg --------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd";> <svg baseProfile="tiny" display="inherit" width="400" height="200" version="1.1" viewBox="0 0 400 200" xml:space="preserve" xmlns=" http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events";> <rect x="0" y="0" width="300" height="20" fill="#ff0000"/> </svg> -------------------------- Block3.svg--------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd";> <svg baseProfile="tiny" display="inherit" height="300" version="1.1" viewBox="0 0 400 300" width="400" xml:space="preserve" xmlns=" http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events";> </svg> ----------------------- Block4.svg ------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd";> <svg baseProfile="tiny" display="inherit" height="300" version="1.1" viewBox="0 0 800 300" width="800" xml:space="preserve" xmlns=" http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events";> <rect x="50" y="0" width="100" height="20" fill="#000000"/> <rect x="50" y="20" width="700" height="20" fill="#ff0000"/> <rect x="50" y="40" width="700" height="20" fill="#ffff00"/> <rect x="50" y="60" width="800" height="20" fill="#ff0000"/> <rect x="50" y="80" width="200" height="20" fill="#ffff00"/> <rect x="50" y="100" width="200" height="20" fill="#ff0000"/> <rect x="50" y="120" width="200" height="20" fill="#ffff00"/> <rect x="50" y="140" width="200" height="20" fill="#ff0000"/> <rect x="50" y="160" width="200" height="20" fill="#ffff00"/> <rect x="50" y="180" width="200" height="20" fill="#ff0000"/> <rect x="50" y="200" width="200" height="20" fill="#ffff00"/> <rect x="50" y="220" width="200" height="20" fill="#ff0000"/> <rect x="50" y="240" width="200" height="20" fill="#ffff00"/> <rect x="50" y="260" width="200" height="20" fill="#ff0000"/> <rect x="50" y="280" width="200" height="20" fill="#000000"/> </svg> -------------------------------------------------------------------------------------------- [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/
