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

Re: getBBox in firefox problem

Expand Messages
  • johnbaronreid1972
    ... But when I call getBBox, the display attribute is inline . Thanks, John.
    Message 1 of 15 , Jan 3, 2008
    • 0 Attachment
      --- In svg-developers@yahoogroups.com, "longsonr" <longsonr@...> wrote:
      >
      > John,
      >
      > In firefox things that are display:none don't have bounding boxes.
      > visibility:hidden might work for you depending on what you want to
      > achieve.
      >
      But when I call getBBox, the display attribute is 'inline'.

      Thanks,
      John.
    • johnbaronreid1972
      ... visibility:hidden does indeed work for me. I still don t know why the display:none didn t though. Unfortunately in my document I can have of the order of
      Message 2 of 15 , Jan 3, 2008
      • 0 Attachment
        --- In svg-developers@yahoogroups.com, "longsonr" <longsonr@...> wrote:
        > In firefox things that are display:none don't have bounding boxes.
        > visibility:hidden might work for you depending on what you want to
        > achieve.

        visibility:hidden does indeed work for me. I still don't know why the
        display:none didn't though.

        Unfortunately in my document I can have of the order of 1000 of these
        elements that I need to hide/display based on mouse clicks. The
        solution using visibility:hidden seems much slower on firefox and ASV6
        than the display:none method was on ASV6. The example I posted was
        just for test, in my real document each of the elements contains
        several other complicated elements. It appears they really slow the
        implementation down. Any other ideas for how I can get it to work with
        display:none?

        Thanks,
        John.
      • Andreas Neumann
        Hi John, there are actually only one problem with firefox and bounding-boxes: * Firefox 1.5 and 2 had a bug where .getBBox() could not be called onload . One
        Message 3 of 15 , Jan 3, 2008
        • 0 Attachment
          Hi John,

          there are actually only one problem with firefox and bounding-boxes:

          * Firefox 1.5 and 2 had a bug where .getBBox() could not be called
          "onload". One had to do a slight delay, using setTimeout() with a few
          milliseconds. This is corrected in Firefox3 though.

          Other than that Firefox is correct when not returning bounding-boxes
          when display is set to none. The difference between display=none and
          visibility=hidden is that with visibility, the elements are part of
          the rendering tree, while with display=none they are not. For
          elements that aren't part of the rendering tree it is impossible to
          calculate bounding boxes. The same applies for newly created elements
          that haven't been appended to the DOM tree.

          Hope this helps,
          Andreas

          --- In svg-developers@yahoogroups.com, "johnbaronreid1972"
          <johnbaronreid1972@...> wrote:
          >
          > Hi,
          >
          > I can't get the following code to work in firefox. ASV6 seems to
          have
          > no problems. I imagine I've got something to do with namespaces
          wrong
          > but I can't figure out what it is. Under firefox I get the following
          > error when getBBox() is called:
          >
          > Error: uncaught exception: [Exception... "Component returned failure
          > code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]"
          > nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
          > file:///C:/Dev/MyProjects/Bio/svg/bbox_test.svg :: on_event :: line
          > 30" data: no]
          >
          > Any help would be much appreciated. I looked at
          > http://wiki.svg.org/GetBBox and tried to follow the advice there.
          >
          > Thanks,
          > John.
          >
          >
          >
          > The svg is:
          >
          > <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
          > <svg
          > xmlns="http://www.w3.org/2000/svg"
          > baseProfile="full"
          > onload="init(evt);"
          > preserveAspectRatio="xMidYMid"
          > version="1.1"
          > viewBox="0 0 150 130"
          > xmlns:ev="http://www.w3.org/2001/xml-events"
          > xmlns:xlink="http://www.w3.org/1999/xlink">
          >
          > <script type="text/javascript"><![CDATA[
          > var svgNS = "http://www.w3.org/2000/svg";
          > var doc = null;
          > var root = null;
          >
          > function init(evt)
          > {
          > doc = evt.target.ownerDocument;
          > root = doc.documentElement;
          > };
          >
          > function on_event()
          > {
          > var hit_info = doc.getElementById('info');
          > if( null == hit_info ) alert('Could not find: info');
          > else {
          > var back = doc.getElementById('back');
          > if (toggle_display(hit_info)) {
          > var outline = hit_info.getBBox();
          > back.setAttribute('x', outline.x -
          1.5);
          > back.setAttribute('y', outline.y -
          1.5);
          > back.setAttribute('width',
          outline.width + 3);
          > back.setAttribute('height',
          outline.height + 3);
          > back.setAttribute('display',
          'inline');
          > } else {
          > back.setAttribute('display', 'none');
          > }
          > }
          > }
          >
          > function toggle_display(el)
          > {
          > if ('none' == el.getAttribute('display')) {
          > el.setAttribute('display', 'inline');
          > return true;
          > } else {
          > el.setAttribute('display', 'none');
          > return false;
          > }
          > };
          > ]]></script>
          >
          > <circle id="hit" cx="50" cy="50" fill="white"
          onclick="on_event()"
          > r="2" stroke="black" stroke-width="0.3"/>
          > <rect id="back" display="none" fill="lightgray" rx="0.3"
          > stroke="lightgray" stroke-width="0.3"/>
          > <rect id="info" display="none" fill='green' x='5' y='5'
          width='20'
          > height='10'/>
          > </svg>
          >
        • johnbaronreid1972
          ... I m afraid it doesn t help. My element has display:none initially then I set display to inline in the javascript then I call getBBox which throws an error.
          Message 4 of 15 , Jan 3, 2008
          • 0 Attachment
            --- In svg-developers@yahoogroups.com, "Andreas Neumann" <neumann@...>
            wrote:
            >
            > Hi John,
            >
            > there are actually only one problem with firefox and bounding-boxes:
            >
            > * Firefox 1.5 and 2 had a bug where .getBBox() could not be called
            > "onload". One had to do a slight delay, using setTimeout() with a few
            > milliseconds. This is corrected in Firefox3 though.
            >
            > Other than that Firefox is correct when not returning bounding-boxes
            > when display is set to none. The difference between display=none and
            > visibility=hidden is that with visibility, the elements are part of
            > the rendering tree, while with display=none they are not. For
            > elements that aren't part of the rendering tree it is impossible to
            > calculate bounding boxes. The same applies for newly created elements
            > that haven't been appended to the DOM tree.
            >
            > Hope this helps,
            > Andreas
            >
            I'm afraid it doesn't help. My element has display:none initially then
            I set display to inline in the javascript then I call getBBox which
            throws an error. I don't think I am doing anything wrong. Please let
            me know if I am.

            John.
          • longsonr
            ... wrote: You are not doing anything wrong. You are suffering from https://bugzilla.mozilla.org/show_bug.cgi?id=339807 This was fixed
            Message 5 of 15 , Jan 3, 2008
            • 0 Attachment
              --- In svg-developers@yahoogroups.com, "johnbaronreid1972"
              <johnbaronreid1972@...> wrote:

              You are not doing anything wrong. You are suffering from
              https://bugzilla.mozilla.org/show_bug.cgi?id=339807

              This was fixed during the Firefox 3 development cycle. A workaround
              would be to use setTimeout as Andreas suggests.

              Best regards

              Robert.

              >
              > --- In svg-developers@yahoogroups.com, "Andreas Neumann" <neumann@>
              > wrote:
              > >
              > > Hi John,
              > >
              > > there are actually only one problem with firefox and bounding-boxes:
              > >
              > > * Firefox 1.5 and 2 had a bug where .getBBox() could not be called
              > > "onload". One had to do a slight delay, using setTimeout() with a few
              > > milliseconds. This is corrected in Firefox3 though.
              > >
              > > Other than that Firefox is correct when not returning bounding-boxes
              > > when display is set to none. The difference between display=none and
              > > visibility=hidden is that with visibility, the elements are part of
              > > the rendering tree, while with display=none they are not. For
              > > elements that aren't part of the rendering tree it is impossible to
              > > calculate bounding boxes. The same applies for newly created elements
              > > that haven't been appended to the DOM tree.
              > >
              > > Hope this helps,
              > > Andreas
              > >
              > I'm afraid it doesn't help. My element has display:none initially then
              > I set display to inline in the javascript then I call getBBox which
              > throws an error. I don't think I am doing anything wrong. Please let
              > me know if I am.
              >
              > John.
              >
            • johnbaronreid1972
              ... Right - now I see that the bug report mentions that it can happen outside the onload event(). That was confusing as I m definitely not doing anything in
              Message 6 of 15 , Jan 3, 2008
              • 0 Attachment
                --- In svg-developers@yahoogroups.com, "longsonr" <longsonr@...> wrote:
                >
                > --- In svg-developers@yahoogroups.com, "johnbaronreid1972"
                > <johnbaronreid1972@> wrote:
                >
                > You are not doing anything wrong. You are suffering from
                > https://bugzilla.mozilla.org/show_bug.cgi?id=339807
                >
                > This was fixed during the Firefox 3 development cycle. A workaround
                > would be to use setTimeout as Andreas suggests.
                >
                Right - now I see that the bug report mentions that it can happen
                outside the onload event(). That was confusing as I'm definitely not
                doing anything in the onload event.

                Thanks for the help,
                John.
              • longsonr
                ... I think you are confusing the bug I mentioned with the onload bug that Andreas mentioned previously. There are (at least) two different bugs with GetBBox
                Message 7 of 15 , Jan 3, 2008
                • 0 Attachment
                  --- In svg-developers@yahoogroups.com, "johnbaronreid1972"
                  <johnbaronreid1972@...> wrote:
                  >
                  > --- In svg-developers@yahoogroups.com, "longsonr" <longsonr@> wrote:
                  > >
                  > > --- In svg-developers@yahoogroups.com, "johnbaronreid1972"
                  > > <johnbaronreid1972@> wrote:
                  > >
                  > > You are not doing anything wrong. You are suffering from
                  > > https://bugzilla.mozilla.org/show_bug.cgi?id=339807
                  > >
                  > > This was fixed during the Firefox 3 development cycle. A workaround
                  > > would be to use setTimeout as Andreas suggests.
                  > >
                  > Right - now I see that the bug report mentions that it can happen
                  > outside the onload event(). That was confusing as I'm definitely not
                  > doing anything in the onload event.

                  I think you are confusing the bug I mentioned with the onload bug that
                  Andreas mentioned previously. There are (at least) two different bugs
                  with GetBBox in firefox 2 a) it doesn't work onload b) it doesn't work
                  immediately after you change things. SetTimeout should be able to work
                  around both.

                  Robert.
                  >
                  > Thanks for the help,
                  > John.
                  >
                • johnbaronreid1972
                  ... I did have the right end of the stick even though my badly worded email suggested otherwise. Thanks for the clarification. I have another problem now that
                  Message 8 of 15 , Jan 4, 2008
                  • 0 Attachment
                    --- In svg-developers@yahoogroups.com, "longsonr" <longsonr@...> wrote:

                    > I think you are confusing the bug I mentioned with the onload bug that
                    > Andreas mentioned previously. There are (at least) two different bugs
                    > with GetBBox in firefox 2 a) it doesn't work onload b) it doesn't work
                    > immediately after you change things. SetTimeout should be able to work
                    > around both.

                    I did have the right end of the stick even though my badly worded
                    email suggested otherwise. Thanks for the clarification.

                    I have another problem now that firefox seems to get the bbox wrong.
                    It returns an extremely large width. I'm using <svg> elements with
                    several transforms inside the element I'm calling getBBox on. Is this
                    known to confuse it? I'm on the latest version of Firefox 2. ASV6
                    appears to have no problems. I would post an example but I haven't
                    whittled it down to a test case yet.

                    Best,
                    John.
                  • johnbaronreid1972
                    ... Here s a reasonably small test case where the Firefox 2 and ASV6 behaviour differs significantly:
                    Message 9 of 15 , Jan 4, 2008
                    • 0 Attachment
                      --- In svg-developers@yahoogroups.com, "johnbaronreid1972"
                      <johnbaronreid1972@...> wrote:
                      > I have another problem now that firefox seems to get the bbox wrong.
                      > It returns an extremely large width. I'm using <svg> elements with
                      > several transforms inside the element I'm calling getBBox on. Is this
                      > known to confuse it? I'm on the latest version of Firefox 2. ASV6
                      > appears to have no problems. I would post an example but I haven't
                      > whittled it down to a test case yet.

                      Here's a reasonably small test case where the Firefox 2 and ASV6
                      behaviour differs significantly:

                      <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
                      <svg xmlns="http://www.w3.org/2000/svg" baseProfile="full"
                      onload="init(evt);" pointer-events="none"
                      preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 140 130"
                      xmlns:ev="http://www.w3.org/2001/xml-events"
                      xmlns:xlink="http://www.w3.org/1999/xlink">

                      <script type="text/javascript">

                      <![CDATA[
                      var svgNS = "http://www.w3.org/2000/svg";
                      var mydoc = null;
                      var root = null;


                      function init(evt)
                      {
                      mydoc = evt.target.ownerDocument;
                      root = mydoc.documentElement;
                      };

                      function show_notes()
                      {
                      var back = mydoc.getElementById('notes_background');
                      try {
                      var outline = notes_panel.getBBox();
                      back.setAttributeNS(null, 'width', Number(outline.width) + 2);
                      back.setAttributeNS(null, 'height', Number(outline.height) + 2);
                      back.setAttributeNS(null, 'x', Number(outline.x) - 1);
                      back.setAttributeNS(null, 'y', Number(outline.y) - 1);
                      } catch (er) {
                      }
                      notes_panel.setAttributeNS(null, 'display', 'inline');
                      }

                      function hide_notes()
                      {
                      notes_panel.setAttributeNS(null, 'display', 'none');
                      }

                      function click_hit(hit_id)
                      {
                      var hit = mydoc.getElementById(hit_id);
                      if( null != hit ) {
                      var parent = hit.parentNode;
                      parent.removeChild(hit);
                      parent.appendChild(hit);
                      }

                      var hit_info = mydoc.getElementById(hit_id + '_info');
                      if( null != hit_info ) {
                      var back = mydoc.getElementById(hit_id + '_info_back');
                      var underlines = mydoc.getElementById(hit_id + '_underlines');
                      if( toggle_visibility(hit_info) ) {
                      if( null != underlines ) underlines.setAttributeNS(null, 'display',
                      'inline');
                      setTimeout('resize_info_outline("'+hit_id+'");', 1);
                      } else {
                      if( null != underlines ) underlines.setAttributeNS(null, 'display',
                      'none');
                      back.setAttributeNS(null, 'width', 0);
                      back.setAttributeNS(null, 'height', 0);
                      back.setAttributeNS(null, 'x', 0);
                      back.setAttributeNS(null, 'y', 0);
                      }
                      }
                      }

                      function resize_info_outline(hit_id) {
                      var back = mydoc.getElementById(hit_id + '_info_back');
                      var hit_info = mydoc.getElementById(hit_id + '_info');
                      var outline = hit_info.getBBox();
                      back.setAttributeNS(null, 'width', Number(outline.width) + 2);
                      back.setAttributeNS(null, 'height', Number(outline.height) + 2);
                      back.setAttributeNS(null, 'x', Number(outline.x) - 1);
                      back.setAttributeNS(null, 'y', Number(outline.y) - 1);
                      }

                      function toggle_visibility(el)
                      {
                      var current = el.getAttributeNS(null, 'display');
                      if ('none' == current) {
                      el.setAttributeNS(null, 'display', 'inline');
                      return true;
                      } else {
                      el.setAttributeNS(null, 'display', 'none');
                      return false;
                      }
                      };

                      ]]>
                      </script>

                      <defs>
                      <g id="A" transform="scale(1.5,1.4)">
                      <text style="text-anchor:start; font-family: arial;
                      fill:chartreuse; font-size:100px">A</text>
                      </g>
                      <g id="C" transform="scale(1.58,1.35) translate(-5,0)">
                      <text style="text-anchor:start; font-family: arial; fill:orange;
                      font-size:100px; baseline-shift:1%">C</text>
                      </g>
                      <g id="G" transform="scale(1.5,1.35) translate(-5,0)">
                      <text style="text-anchor:start; font-family: arial; fill:cyan;
                      font-size:100px; baseline-shift:1%">G</text>
                      </g>
                      <g id="T" transform="scale(1.75,1.4) translate(-2,0)">
                      <text style="text-anchor:start; font-family: arial; fill:red;
                      font-size:100px">T</text>
                      </g>
                      </defs>

                      <g transform="translate(0 20)">
                      <g transform="translate(0)">
                      <g>
                      <g id="hit_19" transform="translate(31.5 47.2035)">
                      <circle fill="#3366FF" onclick="click_hit('hit_19')"
                      pointer-events="visiblePainted" r="2" stroke="black"
                      stroke-width="0.3" x="0" y="0"/>
                      <g display="none" id="hit_19_info"
                      pointer-events="visiblePainted" transform="translate(3 0) scale(.5)
                      translate(0 -17)">
                      <rect fill="white" height="0" id="hit_19_info_back"
                      rx="0.3" stroke="lightgray" stroke-width="0.3" width="0" x="0" y="0"/>
                      <svg height="10" viewBox="0 0 100 200" width="55">
                      <g transform="translate(0 200)">
                      <g transform="translate(0 0) scale(1 0.052198)">
                      <use xlink:href="#T"/>
                      </g>
                      </g>
                      </svg>
                      </g>
                      </g>
                      </g>
                      </g>
                      </g>

                      </svg>
                    • brucerindahl
                      ... I think there are (at least) three. https://bugzilla.mozilla.org/show_bug.cgi?id=293581 is still there - see the last comment. I don t think setTimeout
                      Message 10 of 15 , Jan 4, 2008
                      • 0 Attachment
                        --- In svg-developers@yahoogroups.com, "longsonr" <longsonr@...> wrote:
                        > I think you are confusing the bug I mentioned with the onload bug that
                        > Andreas mentioned previously. There are (at least) two different bugs
                        > with GetBBox in firefox 2 a) it doesn't work onload b) it doesn't work
                        > immediately after you change things. SetTimeout should be able to work
                        > around both.
                        >
                        > Robert.

                        I think there are (at least) three.
                        https://bugzilla.mozilla.org/show_bug.cgi?id=293581
                        is still there - see the last comment. I don't think setTimeout will
                        help this.

                        Bruce
                      Your message has been successfully submitted and would be delivered to recipients shortly.