[Webkit-unassigned] [Bug 14376] New: Relative and absolute positioning of inlined SVG elements is broken

Sun Jun 24 21:37:15 PDT 2007

http://bugs.webkit.org/show_bug.cgi?id=14376

           Summary: Relative and absolute positioning of inlined SVG
                    elements is broken
           Product: WebKit
           Version: 522+ (nightly)
          Platform: PC
               URL: http://cfis.savagexi.com/articles/2007/06/24/safaris-
                    svg-growing-pains
        OS/Version: Mac OS X 10.4
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: SVG
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: cfis at savagexi.com

Place an svg element within an xhtml document.  Then change the svg element's
positioning to relative or absolute.  Safari 3 beta no longer maps the mouse
coordinates correctly to the SVG coordinate space, thus breaking mouse over,
mouse out, etc.

I've included a test case below.  If you want to see it online, I put in on my
blog at http://cfis.savagexi.com/articles/2007/06/24/safaris-svg-growing-pains.

Thanks,

Charlie

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="height: 100%">
<script type="text/javascript">
        window.onload = function()
        {
                var rect = document.getElementById('rect1')
    rect.setAttribute('fill', 'blue')
                rect.addEventListener('mouseover', onMouseOver, false)
                rect.addEventListener('mouseout', onMouseOut, false)
        }

        function onMouseOver(event)
        {
                var rect = document.getElementById('rect1')
    rect.setAttribute('fill', 'red')
        }               

        function onMouseOut(event)
        {
                var rect = document.getElementById('rect1')
    rect.setAttribute('fill', 'blue')
        }               
        </script>
<p>Safari does not correctly translate mouse event locations to inlined svg
elements. For example, below is an svg drawing relatively positioned by 50, 50
pixels. When you mouse over the blue rectangle, it should turn red. This works
correctly in Opera and Firefox.</p>
<p>However,  in Safari, the blue rectangle  turns red only when you mouse over
the yellow rectangle! Safari doesn't  appear to be taking into  account the
relative offset of the  svg element. Absolutely positioning the svg element
only makes things worse - only a small part of the blue rectangle gets
highlighted.      </p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  style="position: relative; left: 100px; top: 100px">
    <rect x="0" y="0" width="300" height="300" style="stroke: green; fill:
none"  />
    <rect id="rect1" x="100" y="100" width="100" height="100"  />
    <rect id="rect1" x="0" y="0" width="100" height="100" style="stroke:
yellow; stroke-style: dashed; fill: none"  />
</svg>
</body>
</html>

-- 
Configure bugmail: http://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.