SVG 'def' 标签不适用于 JS 事件答案

【问题标题】：SVG 'def' tag not functioning with JS eventsSVG 'def' 标签不适用于 JS 事件
【发布时间】：2010-12-01 11:36:57
【问题描述】：

我在 Firefox 3.6 和 Firefox 4.0b 中与 SVG 'defs' 标签相关的 Javascript 事件有点问题。

我在 SVG 画布上有一张包含在“defs”标签中的图像。现在我有一个附加到光标的事件，当鼠标悬停在图像上时，光标会给出坐标。这似乎在 Chrome、Safari 和 Opera 中运行良好，但在 Firefox 浏览器中却不行。在 Firefox 中，没有显示错误，只是坐标没有随着光标移动而出现。

有什么意见和建议吗？

编辑：埃里克，感谢您的回复。为错误道歉，我的意思是“defs”标签。这是代码：

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=event.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 不允许我通过此处的 SVG 代码。我已将文本文件上传到 4shared。希望没问题。

JS & SVG defs issue in FF

【问题讨论】：

标签： firefox svg dom-events

【解决方案1】：

Kayote，考虑发布一个完整的文件，而不仅仅是这件作品。缺少太多的上下文。对于初学者，我们甚至看不到将 id 值“x”和“y”分配给元素的位置。错误可能在那里。

上周我开始在 html 文件中处理 svg 内容，我遇到的第一个问题是将文件结尾更改为 .xml 而不是 .html，至少对于我正在创建的特定文件，使我能够得到svg 效果在 html 页面中起作用，尽管这些效果是从工作 .svg 文件中复制的，但这些效果无法正常工作。

我遇到的另一个问题是没有使用这个 NS 版本的 document.createElementNS 创建一个“使用”节点[即，您必须指定“http://www.w3.org/2000/svg”作为参数到此调用，而不是使用标准的 .createElement 调用）。

还有一个问题是，由于某种原因（我还不明白），ansvgelement.setAttribute("visibility", "hidden") 不起作用，而 ansvgelement.setAttribute("style", "visibility:hidden" ) 做了。

有很多事情可能出错，与你所关注的部分无关。

【讨论】：

【解决方案2】：

svg 中没有<def> 标签。不过有一个<defs> 标签。如果没有一些示例代码，很难判断出了什么问题，您可以将其包含在此处或发布指向它的链接吗？ <defs> 标签内的任何内容都不应该直接呈现，所以我不确定你的意思。

问题可能是您有一个错误命名的标签 (<def>)（在实现时将被视为 svg 命名空间中的未知标签），并且 firefox 拒绝允许您从其他元素引用事物，例如作为<use>?

【讨论】：