1

我使用带有 Raphael 的 svg 制作了一个网站http://zielonyzoliborz.pl/，当您将鼠标悬停在屏幕上（FF、Chrome、Safari）上但不在 IE9 和 Opera 中时，我什至为IE8 可以工作但不是上述浏览器

我正在使用 Raphael.js 设置一个简单的标题，例如：

paper.path("M1345.5,413.5l0.125-31.125L1256.5,371l-18,22.5l1,22L1038,389.333l-3,3.333l-62,53V454 l-13,11.333v34.333l-42.333-7l-85.333,77v8.667l-14,12v95L821,689v5.25l3.25,2.75v9h5.5l1.25-5.25V697l3-2l2.75-3.875l2-2.625v-4.75 l3-3l3.5-2.75l6.5,0.25l1.75,1.25l2.5,1.75l2.75,4.75v4v2.25V694l2.5,2.25V701v5.75v3.75v2.5l3,1.25H867v-4.75V703v-4.25v-6.25 l2.75-2l1.25-6l3.25-2.5l2.25-5.75h4h3.75l2.5,4.75l1.75,3l1.25,3v5.75l2.5-2.75l3.25-0.25l4-3.25l2.25-1h3.5l3.25,0.75l1.5-4.5 c0,0,3.75-1.5,4.5-0.5s3,1.75,3,2.5s0.75,3,1.75,3.25s4.5,2.5,4.5,2.5s-0.25,3.75,0,4.5s1.25,4.25,1.25,4.25l2,2.5 c0,0,5,0.75,5.75,1s3-1.25,3-1.25l1.5-3.5l3-1.75l2-2.75H945l3.25,0.25h4.25l2.75-1l2.5,1.5c0,0,1.5,3.25,2.25,4s4,4.5,4,4.5 l2.25,4.5l1.75,1.25l4.75-0.5l2.25-4.75v-3.5l3-1.5l3.75,0.25c0,0,3.25,2.25,3.25,3.25s3.5,4.5,3.5,4.5l1.5,4.5l1.5,5.75l2,5v5.25 l3,2h3.25l3.75-2.5h3.75l2.5-1.5l2.5-2.75h3.75l4.75,2.75v3v4L1024,734v5.25v3.25v2l4.25-4.75c0,0,3-1.25,4-1.25s5.25-1,5.25-1 l-2-4.75l2-2.25l2-1.75l-5.75-2.5l-0.25-4l3-1.25l1.25-4.75l3-2.25l4.25-2.5l3.5-1.125l5,1.125l4,3l4.25,3l2.25,4l2.5,2v5.5l4,3.75 l2,2.75l1.75-0.25l2.75-2l1.25-4.75l3.25-4.25l2.5-3.25l2.729-2.25l2.021-2.25h3.75l3.5,1.5l3,3.5v5l2.5,1.25l1.75-3.25l4.25-1.5 h3.5l4.5,3.25l2.75,4.75l1.5,3.75l3.75,0.75l3,3.25l5.75,5.75l1.75,2.25l1.25,3.5v5.25l2.5,2.25l2.25,2.75h8.25h4.25l3.75,1.75 l3,2.5V767l3.25,4.75l2-4.5l3.75-3l2.5-8.5v-4.25c0,0,3.25-2.25,3.25-3s3.5-3.75,3.5-3.75l3.75-1.75l2-3.25V736l5.25-1.5l5-4.75h3.5 l3.25,1l2.75,2.5l3,2.5l1.25,6l1.5,3.5V749c0,0,2,2.5,1.75,3.25s-1,5.5-1,5.5l1.021,6c0,0,0.838,1.598,1.66,2.892l142.326-236.143 l0.617-116.749L1345.5,413.5z M1116,536h-4.667l0.042,6.375l-13.375,14.5v22.375l-68-10.917l35-41.667l26.667,5l5.666-2.667 l3.709-1.854l4.958-0.083l5.125,0.688l3.542,2.583l3,2.667L1116,536z").attr({
"fill":"#FBA919",
"stroke-width":0,
"fill-opacity":0,
"stroke":"transparent",
"cursor":"pointer",
"title":"Budynek B"
}).mouseover(
function(){
this.animate({
"fill-opacity":.4
},300);
}).mouseout(function(){
this.animate({
"fill-opacity":0
},300);
});

和 easytooltip.js 显示图形标题（FF。Chrome，Opera）

$('svg a:nth-child(21)').easyTooltip({
tooltipId:"budynek-b",
yOffset:90,
xOffset:-44,
});

#budynek-b{
background:url(../img/zz_budynekB_smal.png) no-repeat center center;    
width:60px;    
height:86px;    
overflow:hidden;    
text-indent:-9999px;    
z-index:1000000
}
4

1 回答 1

0

您的代码中有一个 javascript 错误（这是从 Opera Dragonfly 调试工具复制而来的）：

Uncaught exception: TypeError: Cannot convert 'b' to objectError thrown at line 1210, column 3 in <anonymous function: _getDisplayTextForRecordField>(b, a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    var c = this.options.fields[a],
called from line 1155, column 3 in <anonymous function: _createCellForRecordField>(b, a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    return c('<td class="' + this.options.fields[a].listClass + '"></td>').append(this._getDisplayTextForRecordField(b, a) || "")
called via Function.prototype.apply() from line 2476, column 3 in <anonymous function: _createCellForRecordField>(a, b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    var c = d.apply(this, arguments);
called from line 1152, column 4 in <anonymous function: _addCellsToRowUsingRecord>(b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    this._createCellForRecordField(b.data("record"), this._columnList[a]).appendTo(b)
called via Function.prototype.apply() from line 1757, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments);
called via Function.prototype.apply() from line 1990, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments);
called via Function.prototype.apply() from line 2120, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments)
called from line 1147, column 3 in <anonymous function: _createRowFromRecord>(b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    this._addCellsToRowUsingRecord(b);
called from line 1160, column 4 in <anonymous function: _addRecordsToTable>(b, d) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    a._addRowToTable(a._createRowFromRecord(d))
called via Function.prototype.call() from line 608, column 7 in <anonymous function: each>(a, c, d) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/jquery-1.7.2.min.js:
    if (c.call(a[g], g, a[g++]) === !1)

我的猜测是缺少的工具提示与该错误有关。

更新：好的，在修复之后我又看了一眼，问题是元素title上属性的命名空间。<svg:a>如果使用命名空间感知方法来访问属性，它就可以工作。

黑客/解决方法是这样的：

var title = $(this).attr("title") || this.getAttributeNS("http://www.w3.org/1999/xlink", "title");

这将被放置在您的plugin.js脚本中（这显示了修改后的代码）：

$.fn.easyTooltip = function(options){

    // default configuration properties
    var defaults = {    
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: false,
        content: "",
        useElement: ""
    }; 

    var options = $.extend(defaults, options);  
    var content;

    this.each(function() {                  
        var title = $(this).attr("title") || this.getAttributeNS("http://www.w3.org/1999/xlink", "title");
        $(this).hover(function(e){                                                                         
            content = (options.content != "") ? options.content : title;
            content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
            $(this).attr("title","");                                                   
            if (content != "" && content != undefined){         
                $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");      
                $("#" + options.tooltipId)
                    .css("position","absolute")
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                     
                    .css("display","none")
                    .fadeIn("fast")
            }
        },

此处的更改是getAttributeNS在 jQuery.attr方法失败时回退（隐藏浏览器差异如此之多，嗯？；）。有了它，它至少在 Opera 中有效。真正更好的解决方法是确保设置属性的地方要么将它们设置在空命名空间中，例如，elm.setAttributeNS(null, "title", "some-value")要么让 jQuery 命名空间感知（但我不认为这种情况发生的可能性特别大）。

于 2012-12-05T11:59:39.827 回答