Question

我有一个index.html lik ethis：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Tooltip Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<embed src="usmap.svg" width="3000" height="1000"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<script type="text/javascript" language="javascript" src="script.js"></script>
</body>
</html>

javascript文件本身是：

var tooltip=function(){
    var id = 'tt';
    var top = 3;
    var left = 3;
    var maxw = 300;
    var speed = 10;
    var timer = 20;
    var endalpha = 95;
    var alpha = 0;
    var tt,t,c,b,h;
    var ie = document.all ? true : false;
    return{
        show:function(v,w){
            if(tt == null){
                tt = document.createElement('div');
                tt.setAttribute('id',id);
                t = document.createElement('div');
                t.setAttribute('id',id + 'top');
                c = document.createElement('div');
                c.setAttribute('id',id + 'cont');
                b = document.createElement('div');
                b.setAttribute('id',id + 'bot');
                tt.appendChild(t);
                tt.appendChild(c);
                tt.appendChild(b);
                document.body.appendChild(tt);
                tt.style.opacity = 0;
                tt.style.filter = 'alpha(opacity=0)';
                document.onmousemove = this.pos;
            }
            tt.style.display = 'block';
            c.innerHTML = v;
            tt.style.width = w ? w + 'px' : 'auto';
            if(!w && ie){
                t.style.display = 'none';
                b.style.display = 'none';
                tt.style.width = tt.offsetWidth;
                t.style.display = 'block';
                b.style.display = 'block';
            }
            if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
            h = parseInt(tt.offsetHeight) + top;
            clearInterval(tt.timer);
            tt.timer = setInterval(function(){tooltip.fade(1)},timer);
        },
        pos:function(e){
            var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
            var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
            tt.style.top = (u - h) + 'px';
            tt.style.left = (l + left) + 'px';
        },
        fade:function(d){
            var a = alpha;
            if((a != endalpha && d == 1) || (a != 0 && d == -1)){
                var i = speed;
                if(endalpha - a < speed && d == 1){
                    i = endalpha - a;
                }else if(alpha < speed && d == -1){
                    i = a;
                }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            }else{
                clearInterval(tt.timer);
                if(d == -1){tt.style.display = 'none'}
            }
        },
        hide:function(){
            clearInterval(tt.timer);
            tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
        }
    };
}();

当我把它称为SVG：

onmouseover="tooltip.show('Testing 123 ');" onmouseout="tooltip.hide();"

它什么都没做！

有谁知道为什么？

Answer 1

您的XHTML无效，并且您在其中嵌入SVG的非标准方法也是如此，AFAIK作为单独的文档（不与父文档共享相同的窗口对象）。

该脚本首先不是为SVG编写的，但它中有IE特定内容，IE不支持SVG。

Answer 2

<embed src="usmap.svg" ...
<script type="text/javascript" language="javascript" src="script.js"></script>

您已在主HTML文档中包含JavaScript，但您的SVG位于单独的嵌入式文档中。嵌入的文档无权访问所有者HTML文档;它不能从该文档中的脚本调用方法，即使您将该脚本包含在SVG文档中，它也不会起作用，因为这个特定的脚本只能写入（非常糟糕）与HTML文档进行交互。

嵌入式SVG是老式的。它主要用于支持IE与Adobe SVG插件，但该插件不再受支持，没有人再使用它（几乎没有人使用它）。在作为application/xhtml+xml的XHTML + SVG文档中，include your SVG as part of the document itself要好得多。目前唯一不支持此功能的桌面浏览器是IE6-8。然后，您可以一起使用HTML和SVG内容。

（你也可以失去古老的language="javascript"。）

javascript代码没有执行！

2 个答案: