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

SVG element suppressing mouse events in Firefox

Expand Messages
  • slightlynew
    Hello, I m new to SVG, so this may be a dumb question, but I d really appreciate your help. I recently replaced a number of complicated DOM hacks (whose
    Message 1 of 6 , Jan 31, 2009
    • 0 Attachment
      Hello,

      I'm new to SVG, so this may be a dumb question, but I'd really
      appreciate your help. I recently replaced a number of complicated DOM
      hacks (whose purpose was to display some simple graphics) with some
      simple SVG elements who are doing their job quite well. Unfortunately
      this change has brought about a side effect in Firefox that I don't
      know how to fix: now that there's a (mostly transparent) SVG element
      covering most of the page, mouse events to regular DOM elements in the
      same area aren't getting processed. For example, if you mouse over a
      hyperlink, the cursor doesn't change and clicking has no effect. This
      makes the page unusable in Firefox. In Safari, by the way, this side
      effect isn't present: mouse events are being handled the same way they
      always did.

      I've included the code by which I'm creating the element. The actual
      graphics are mostly rectangles added as children to this element. It's
      my understanding that the rectangles have to be children of a
      top-level svg element. I've made the top-level element have width and
      height covering most of the page, because otherwise the rectangles
      (which may appear anywhere) don't show up. Even if the rectangles
      could be added autonomously, it might not solve the mouse problem,
      though, since hyperlinks within their borders still need to be active.

      Can anyone suggest what to do?

      Thank you,
      Daniel


      var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.style.position = 'absolute';
      svg.style.width = w + 'px';
      svg.style.height = h + 'px';
      svg.setAttribute('viewBox', "0 0 " + w + " " + h);
      parent.appendChild(svg);
    • Robert Longson
      ... Sounds like you might be suffering from https://bugzilla.mozilla.org/show_bug.cgi?id=410820 If not you ll likely have to post a more complete example to
      Message 2 of 6 , Feb 2 6:05 AM
      • 0 Attachment
        --- In svg-developers@yahoogroups.com, "slightlynew"
        <danielgackle@...> wrote:
        >
        > Hello,
        >
        > I'm new to SVG, so this may be a dumb question, but I'd really
        > appreciate your help. I recently replaced a number of complicated DOM
        > hacks (whose purpose was to display some simple graphics) with some
        > simple SVG elements who are doing their job quite well. Unfortunately
        > this change has brought about a side effect in Firefox that I don't
        > know how to fix: now that there's a (mostly transparent) SVG element
        > covering most of the page, mouse events to regular DOM elements in the
        > same area aren't getting processed. For example, if you mouse over a
        > hyperlink, the cursor doesn't change and clicking has no effect. This
        > makes the page unusable in Firefox. In Safari, by the way, this side
        > effect isn't present: mouse events are being handled the same way they
        > always did.
        >

        Sounds like you might be suffering from
        https://bugzilla.mozilla.org/show_bug.cgi?id=410820 If not you'll
        likely have to post a more complete example to show the problem.

        Best regards

        Robert
      • Helder Magalhães
        ... If you are creating graphical content on the fly, you may consider using a library such as Raphaël [1], which has the advantage of achieving compatibility
        Message 3 of 6 , Feb 2 6:19 AM
        • 0 Attachment
          > I recently replaced a number of complicated DOM
          > hacks (whose purpose was to display some simple graphics) with some
          > simple SVG elements who are doing their job quite well.

          If you are creating graphical content on the fly, you may consider
          using a library such as Raphaël [1], which has the advantage of
          achieving compatibility with IE (for which SVG support is currently
          somehow lacking) through the use of VML... ;-)


          > Unfortunately this change has brought about a side effect in
          > Firefox that I don't know how to fix:

          Weird... Could you paste a small HTML file demonstrating the issue,
          instructions on how to reproduce the problem and provide a few more
          details (such as Firefox version, operating system etc.)? If you
          believe this is Firefox-specific, you may consider redirecting this
          question to the official SVG-in-Firefox Google group [2]. :-)


          Hope this helps,

          Helder


          [1] http://dev.opera.com/articles/view/raphael-a-javascript-api-for-svg/
          [2] http://groups.google.com/group/mozilla.dev.tech.svg
        • slightlynew
          Yes, this is it. The decorative overlay case described there is exactly what we re doing, and why we don t want mouse events to be captured at that level. Do
          Message 4 of 6 , Feb 2 9:22 AM
          • 0 Attachment
            Yes, this is it. The "decorative overlay" case described there is
            exactly what we're doing, and why we don't want mouse events to be
            captured at that level.

            Do you have any suggestions for a workaround? I found one
            (http://tech.groups.yahoo.com/group/svg-developers/message/59783) that
            suggests setting the z-index of the SVG element to -1.

            Thank you,
            Daniel

            --- In svg-developers@yahoogroups.com, "Robert Longson" <longsonr@...>
            wrote:
            >
            > --- In svg-developers@yahoogroups.com, "slightlynew"
            > <danielgackle@> wrote:
            > >
            > > Hello,
            > >
            > > I'm new to SVG, so this may be a dumb question, but I'd really
            > > appreciate your help. I recently replaced a number of complicated DOM
            > > hacks (whose purpose was to display some simple graphics) with some
            > > simple SVG elements who are doing their job quite well. Unfortunately
            > > this change has brought about a side effect in Firefox that I don't
            > > know how to fix: now that there's a (mostly transparent) SVG element
            > > covering most of the page, mouse events to regular DOM elements in the
            > > same area aren't getting processed. For example, if you mouse over a
            > > hyperlink, the cursor doesn't change and clicking has no effect. This
            > > makes the page unusable in Firefox. In Safari, by the way, this side
            > > effect isn't present: mouse events are being handled the same way they
            > > always did.
            > >
            >
            > Sounds like you might be suffering from
            > https://bugzilla.mozilla.org/show_bug.cgi?id=410820 If not you'll
            > likely have to post a more complete example to show the problem.
            >
            > Best regards
            >
            > Robert
            >
          • Jon Ferraiolo
            Maybe this has been mentioned already, but what about pointer-events ? http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty slightlynew
            Message 5 of 6 , Feb 2 9:45 AM
            • 0 Attachment
              Maybe this has been mentioned already, but what about 'pointer-events'?

              http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty





              "slightlynew"
              <danielgackle@gma
              il.com> To
              Sent by: svg-developers@yahoogroups.com
              svg-developers@ya cc
              hoogroups.com
              Subject
              [svg-developers] Re: SVG element
              02/02/2009 09:22 suppressing mouse events in Firefox
              AM


              Please respond to
              svg-developers@ya
              hoogroups.com






              Yes, this is it. The "decorative overlay" case described there is
              exactly what we're doing, and why we don't want mouse events to be
              captured at that level.

              Do you have any suggestions for a workaround? I found one
              (http://tech.groups.yahoo.com/group/svg-developers/message/59783) that
              suggests setting the z-index of the SVG element to -1.

              Thank you,
              Daniel

              --- In svg-developers@yahoogroups.com, "Robert Longson" <longsonr@...>
              wrote:
              >
              > --- In svg-developers@yahoogroups.com, "slightlynew"
              > <danielgackle@> wrote:
              > >
              > > Hello,
              > >
              > > I'm new to SVG, so this may be a dumb question, but I'd really
              > > appreciate your help. I recently replaced a number of complicated DOM
              > > hacks (whose purpose was to display some simple graphics) with some
              > > simple SVG elements who are doing their job quite well. Unfortunately
              > > this change has brought about a side effect in Firefox that I don't
              > > know how to fix: now that there's a (mostly transparent) SVG element
              > > covering most of the page, mouse events to regular DOM elements in the
              > > same area aren't getting processed. For example, if you mouse over a
              > > hyperlink, the cursor doesn't change and clicking has no effect. This
              > > makes the page unusable in Firefox. In Safari, by the way, this side
              > > effect isn't present: mouse events are being handled the same way they
              > > always did.
              > >
              >
              > Sounds like you might be suffering from
              > https://bugzilla.mozilla.org/show_bug.cgi?id=410820 If not you'll
              > likely have to post a more complete example to show the problem.
              >
              > Best regards
              >
              > Robert
              >



              ------------------------------------

              -----
              To unsubscribe send a message to:
              svg-developers-unsubscribe@yahoogroups.com
              -or-
              visit http://groups.yahoo.com/group/svg-developers and click "edit my
              membership"
              ----Yahoo! Groups Links





              [Non-text portions of this message have been removed]
            • Daniel Gackle
              Couldn t get it to work. ... [Non-text portions of this message have been removed]
              Message 6 of 6 , Feb 3 8:43 AM
              • 0 Attachment
                Couldn't get it to work.

                On Mon, Feb 2, 2009 at 9:45 AM, Jon Ferraiolo <jferrai@...> wrote:

                >
                > Maybe this has been mentioned already, but what about 'pointer-events'?
                >
                > http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
                >
                > "slightlynew"
                > <danielgackle@gma
                > il.com> To
                > Sent by: svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>
                > svg-developers@ya cc
                > hoogroups.com
                > Subject
                > [svg-developers] Re: SVG element
                > 02/02/2009 09:22 suppressing mouse events in Firefox
                > AM
                >
                >
                > Please respond to
                > svg-developers@ya
                > hoogroups.com
                >
                >
                >
                > Yes, this is it. The "decorative overlay" case described there is
                > exactly what we're doing, and why we don't want mouse events to be
                > captured at that level.
                >
                > Do you have any suggestions for a workaround? I found one
                > (http://tech.groups.yahoo.com/group/svg-developers/message/59783) that
                > suggests setting the z-index of the SVG element to -1.
                >
                > Thank you,
                > Daniel
                >
                > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
                > "Robert Longson" <longsonr@...>
                > wrote:
                > >
                > > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
                > "slightlynew"
                > > <danielgackle@> wrote:
                > > >
                > > > Hello,
                > > >
                > > > I'm new to SVG, so this may be a dumb question, but I'd really
                > > > appreciate your help. I recently replaced a number of complicated DOM
                > > > hacks (whose purpose was to display some simple graphics) with some
                > > > simple SVG elements who are doing their job quite well. Unfortunately
                > > > this change has brought about a side effect in Firefox that I don't
                > > > know how to fix: now that there's a (mostly transparent) SVG element
                > > > covering most of the page, mouse events to regular DOM elements in the
                > > > same area aren't getting processed. For example, if you mouse over a
                > > > hyperlink, the cursor doesn't change and clicking has no effect. This
                > > > makes the page unusable in Firefox. In Safari, by the way, this side
                > > > effect isn't present: mouse events are being handled the same way they
                > > > always did.
                > > >
                > >
                > > Sounds like you might be suffering from
                > > https://bugzilla.mozilla.org/show_bug.cgi?id=410820 If not you'll
                > > likely have to post a more complete example to show the problem.
                > >
                > > Best regards
                > >
                > > Robert
                > >
                >
                > ------------------------------------
                >
                > -----
                > To unsubscribe send a message to:
                > svg-developers-unsubscribe@yahoogroups.com<svg-developers-unsubscribe%40yahoogroups.com>
                > -or-
                > visit http://groups.yahoo.com/group/svg-developers and click "edit my
                > membership"
                > ----Yahoo! Groups Links
                >
                > [Non-text portions of this message have been removed]
                >
                >
                >


                [Non-text portions of this message have been removed]
              Your message has been successfully submitted and would be delivered to recipients shortly.