Loading ...
Sorry, an error occurred while loading the content.

Embeding multiple SVG in HTML ( Scroll Bar issue )

Expand Messages
  • Raks A
    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
    Message 1 of 1 , Jan 17, 2011
    • 0 Attachment
      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]
    Your message has been successfully submitted and would be delivered to recipients shortly.