323676 - SVG onmouseover onmouseout javascript handlers are not being fired when mousing over SVG circle elements

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Derek MacKie]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

If you create an svg doc that has a cirlce element and it has an onmouseover or onmouseout the code deosn't seem to fire. Either that or the javascript doens't cause the circle elements to resize as the handler for those events specifies. One way or another it doesn't work as it does in the adobe svg plugin. sample code is below





Reproducible: Always

Steps to Reproduce:
1. Create doc using the following code snippets as a guide.
2. Load doc in firefox
3. Mouse over the circles in the doc, either the handlers aren't being called or firefox can't resize the circles like adobe can. One way or another its a bug. Interstingly the onclick does work, so I suspect its just not able to resize the circles.


Actual Results:  
Firefox does not cause the circles to resize when moused over


<script xlink:type="simple" xlink:actuate="onLoad" xlink:show="other" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink">
<![CDATA[
function goToUserProfile(username, path)
{
	window.top.location.href = path + "/display/~" + username;
}

function showUserInfo(evt, show, phoneNumberValue, faxValue, emailValue, cnValue, deskCodeValue)
{
	var svgDocument = evt.getTarget().getOwnerDocument();
	var labelsGroup = svgDocument.getElementById("labels");	
	var phonenumber = svgDocument.getElementById("phonenumber");
  var fax = svgDocument.getElementById("fax");
  var email = svgDocument.getElementById("email");
  var cn = svgDocument.getElementById("cn");	
  var deskcode = svgDocument.getElementById("deskcode");
  
	if (show)
	{    		
   var newPhoneNumberText = svgDocument.createTextNode(phoneNumberValue);
   var newFaxText = svgDocument.createTextNode(faxValue);
   var newEmailText = svgDocument.createTextNode(emailValue);
   var newCnText = svgDocument.createTextNode(cnValue);
   var newDeskCodeText = svgDocument.createTextNode(deskCodeValue);

   phonenumber.replaceChild(newPhoneNumberText, phonenumber.getFirstChild());
   fax.replaceChild(newFaxText, fax.getFirstChild());
   email.replaceChild(newEmailText, email.getFirstChild());
   cn.replaceChild(newCnText, cn.getFirstChild());
   deskcode.replaceChild(newDeskCodeText, deskcode.getFirstChild());
		
		//Increase the size of the marker to aid readability
		setMarkerRadius(evt.getTarget(), 10);		
		
		//Show labels
		labelsGroup.setAttribute("display", "inline");
		
		//Show all text
	  phonenumber.setAttribute("display", "inline");
	  fax.setAttribute("display", "inline");
	  email.setAttribute("display", "inline");
	  cn.setAttribute("display", "inline");	
	  deskcode.setAttribute("display", "inline");	
	}
	else
	{   	
	 //Decrease the size of the marker
	 setMarkerRadius(evt.getTarget(), 5);
	
	 //Hide all text
	 labelsGroup.setAttribute("display", "none");
	 phonenumber.setAttribute("display", "none");
	 fax.setAttribute("display", "none");
	 email.setAttribute("display", "none");
	 cn.setAttribute("display", "none");
	 deskcode.setAttribute("display", "none");
	}
}

function setMarkerRadius(circle, radius)
{
	circle.setAttribute("r", radius);
}

function setMarkerColor(circle, color)
{
	circle.setAttribute("fill", color);
}

function showUnassignedDesk(evt, show, deskCode)
{
	var svgDocument = evt.getTarget().getOwnerDocument();
	var unassignedDeskcodeLabel = svgDocument.getElementById("unassigneddeskcodelabel");	
	var unassignedDeskcode = svgDocument.getElementById("unassigneddeskcode");
  
	if (show)
	{    		
   var newUnassignedDeskCodeText = svgDocument.createTextNode(deskCode);

   unassignedDeskcode.replaceChild(newUnassignedDeskCodeText, unassignedDeskcode.getFirstChild());
		
		//Increase the size of the marker to aid readability
		setMarkerRadius(evt.getTarget(), 10);
	
		//Show labels
		unassignedDeskcodeLabel.setAttribute("display", "inline");
		
		//Show unassigned desk code text
	 	unassignedDeskcode.setAttribute("display", "inline");	
	}
	else
	{   	
	 //Decrease the size of the marker
	 setMarkerRadius(evt.getTarget(), 5);
	
	 //Hide all text
	 unassignedDeskcode.setAttribute("display", "none");
	 unassignedDeskcodeLabel.setAttribute("display", "none");
	}
}
// ]]>

onmouseout handler defined it does not fire the handler. In the adobe plugin it works fine but in Firefox 1.5 it does not.

This is an example of a circle element we have in our svg doc.

<circle onmouseout="showUserInfo(evt, false);" onmouseover="showUserInfo(evt, true);" fill="black" stroke="red" cx="56" cy="35" r="5" onclick="goToUserProfile('');" />

Comment 1

[Adam Guthrie]

Duplicated of/related to bug 315592?

Comment 2

[Jonathan Watt [:jwatt]]

Derek, the script you've shown contains non-standard (Adobe only) code. For example, you should change:

  evt.getTarget().getOwnerDocument();

to:

  evt.target.ownerDocument;

For more information see:

  http://jwatt.org/svg/authoring/#asv-getters-and-setters

In fact you should read the whole of that document before filing any further bugs.

I'm marking this bug as invalid. If after reading that document and fixing your SVG it still doesn't work, feel free to reopen, but please attach the *whole* of the broken file (reduced to as small a size as will still demonstrate the bug) using the "Create a New Attachment" link above.