X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Mouse events do not occur when clip-path (SVG) property is set

Posted

Hi,

I think i have found bug in Firefox 17:

If SVG shape has set clip-path property mouse events do not occur / fire. It happens only for Firefox 17 (Windows and Mac) Following code works in Firefox 16, Chrome IE9.

See: More system details for code

Thanks for any help

Modified by jakub.oppelt

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.4 r402
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • Google Update
  • iTunes Detector Plug-in
  • Adobe PDF Plug-In For Firefox and Netscape 10.1.4
  • 5.1.10411.0
  • GEPlugin
  • Microsoft Lync 2010 Meeting Join Plug-in
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0

More Information

<!DOCTYPE html>
<html>
<head>
<script>
function addEvents() {
addEvent("rectBlack");
}
function addEvent(id) {
var path = document.getElementById(id);
path.onmouseover = function () {
alert(id);
}
}
</script>
</head>
<body onload="addEvents()">
<div>
<svg viewBox="0 0 500 500" height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="position: relative; border: 1px solid black;">
<defs>
<clipPath id="ClipPath1">
<rect x="50" y="50" width="500" height="500"/>
</clipPath>
</defs>
<rect id="rectBlack" x="70" y="75" width="50" height="50" fill="#000000" stroke="green" clip-path="url(#ClipPath1)"/>
</svg>
</div>
</body>
</html>

dlaliberte 0 solutions 2 answers

I don't know your particular case, but I learned that my problem was due to the presence of the 'base' tag. Making the clip-path attribute use a full URL, with #sufffix, resolves the problem. However, this breaks for IE9, so people would have to do it conditionally.

dlaliberte 0 solutions 2 answers

And another condition is that this problem doesn't apply to all svg elements, at least not 'circle's. It does apply to 'rect's.

cor-el
  • Top 10 Contributor
  • Moderator
10738 solutions 96600 answers

Helpful Reply

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.

longsonr 2 solutions 15 answers

Helpful Reply

Works in Firefox trunk (21) and although I haven't tested it I think this is fixed in Firefox 19.