SVG 'def' tag not functioning with JS events
I am having a bit of an issue with Javascript events associated with SVG 'defs' tag in Firefox 3.6 & Firefox 4.0b.
I have an image on SVG canvas which is enclosed in 'defs' tags. Now I have an event attached to cursor where the cursor gives the co-ordinates as the mouse rolls over the image. This seems to be working well in Chrome, Safari & Opera but not in Firefox browsers. In Firefox, there is no error shown, just that the co-ordinates do not appear with the cursor movement.
Any advice and suggestions?
Edit: Erik, thanks for the reply. Apologies for the error, I did mean 'defs' tag. here is the code:
var cur= svgDoc.getElementById("BackDrop1")
cur.setAttribute("stroke-width","1" )
zain.setAttribute("stroke","black")
zain.setAttribute("fill","purple")
zain.setAttribute("stroke","black")
zain.setAttribute("opacity","0.3")
zain.setAttribute("pointer-events","all")
cur.onmousemove=function(event)
{
x=event.pageX-320
y=ev开发者_如何学编程ent.pageY-330
if(x>0 && y<0)
{
document.getElementById("x").value=x
document.getElementById("y").value=y*(-1)
}else
if(x<0 && y<0)
{
document.getElementById("x").value=x
document.getElementById("y").value=y*(-1)
}else
if(x>0 && y>0)
{
document.getElementById("x").value=x
document.getElementById("y").value=y*(-1)
}else
if(x<0 && y>0)
{
document.getElementById("x").value=x
document.getElementById("y").value=y*(-1)
}else
if(x==0 && y==0)
{
document.getElementById("x").value=x
document.getElementById("y").value=y*(-1)
}
}
Stack Overflow is not letting me past the SVG code in here for some reason. I've uploaded the text file onto 4shared. Hope that's ok.
JS & SVG defs issue in FF
Kayote, consider posting a full file rather than just this piece. There is too much context that is missing. For starters, we can't even see where the id values "x" and "y" were assigned to elements. The error might be there.
I started working with svg content within html files this past week, and the first problem I encountered was that changing the file ending to .xml rather than .html, at least for the particular file I was creating, enabled me to get svg effects to work in the html page when these effects wouldn't otherwise work despite being copied from a working .svg file.
Another problem I encountered was in not using this NS version of document.createElementNS to create a "use" node [ie, you have to specify "http://www.w3.org/2000/svg" as a parameter to this call rather than use the standard .createElement call).
Yet another problem was that for some reason (which I don't yet understand), ansvgelement.setAttribute("visibility", "hidden") did not work while ansvgelement.setAttribute("style", "visibility:hidden") did.
There are various things that might have gone wrong that would have nothing to do with the bit you are focused on.
There's no <def>
tag in svg. There's a <defs>
tag though. It's hard to tell what's wrong without having some sample code, could you include it here or post a link to it? Anything inside of a <defs>
tag is not supposed to be rendered directly, so I'm not sure what you mean.
Could the issue be that you have a misnamed tag (<def>
) (which will get treated as an unknown tag in the svg namespace by implementations) and which firefox refuses to allow you to reference things from with other elements, such as <use>
?
精彩评论