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

Re: [svg-developers] SVG element and event passthrough

Expand Messages
  • Erik Dahlström
    ... Hmm...it seems to differ a bit, but I can t say that it s working that well on your testcase. The mouse cursor is reset before it reaches the polygon for
    Message 1 of 2 , Jan 8, 2008
    View Source
    • 0 Attachment
      On Sun, 30 Dec 2007 07:49:43 +0100, pekeler <christian@...> wrote:

      > Hi,
      >
      > if I have an SVG element in front of some other DOM elements, Safari 3
      > is letting mouse
      > events pass through the SVG and reach the underlying DOM elements (good)

      Hmm...it seems to differ a bit, but I can't say that it's working that
      well on your testcase. The mouse cursor is reset before it reaches the
      polygon for me in Safari 3 if I move from right to left over the link.

      > Firefox 3 and Opera aren't (bad). Is there anything I can do to have
      > Firefox behave like Safari?

      You can try making your svg be lower than the html, for example by using
      "z-index:-1". That works fine in all three browsers.

      > This example demonstrates the problem. It's OK that the polygon blocks
      > the link, but I
      > don't want the svg element to eat my mouse events.
      >
      > <html xmlns="http://www.w3.org/1999/xhtml"
      > xmlns:svg="http://www.w3.org/2000/svg">
      > <body>
      > <svg:svg pointer-events="none" style="position:absolute; top:0;
      > left:0; width:100px;
      > height:50px;">
      > <svg:polygon pointer-events="all" points="5,5 70,5 45,45"
      > style="fill:blue;
      > opacity:0.7;"/>
      > </svg:svg>
      > <a href="#">try to click this link</a>
      > </body>
      > </html>

      You can always compare with this non-svg testcase:

      <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
      <body>
      <div style="position:absolute; top:0; left:0; width:100px; height:50px;
      background: red; opacity:0"/>
      <a href="#">try to click this link</a>
      </body>
      </html>

      Cheers
      /Erik

      --
      Erik Dahlstrom, Core Technology Developer, Opera Software
      http://my.opera.com/macdev_ed
    Your message has been successfully submitted and would be delivered to recipients shortly.