javascript - jQuery offset() 在 Safari/Chrome iOS 中不起作用

Question

以下代码循环遍历图像数组并根据 Highcharts 标记(与图表上的点相关联的文本)的位置创建它们。它在桌面上的 Chrome、FF、IE 中运行良好，但在桌面或 iOS 中均无法在 Safar 中运行，甚至 Chrome iOS 也不显示图像。

我得到的错误是:ma​​in.js:453 - TypeError: 'undefined' is not an object (evaluating 'markerOffset.left')

$.each(value, function(k, v){

    var z = i;

    // Store the current marker 
    var marker = $('text').filter(function() { if($(this).html() === k) { return $(this) } });

    // Get the markers offset
    var markerOffset = marker.offset();

    // If in Firefox, set the marker height to 13 px
    if(marker.height() == 0){

        markerHeight = 13;

    }
    else{

        markerHeight = marker.height();

    }

    // Get the image dimensions
    // Create new image object and get the width and height
    // The image has to be downloaded first
    var img = new Image();

    // Set the image location
    img.src = v.img;

    // When the image is downloaded, you can get the dimensions
    img.onload = function(){

        var imgHeight = img.height;
        var imgDivHeight = img.height;
        var imgWidth = img.width;

        // If the image Width is more than 90px, resize it
        if(imgWidth > 50){

            imgDivHeight = imgHeight / (imgWidth / 50);
            imgHeight = (imgHeight / (imgWidth / 50)) + 5;
            imgWidth = 50;

        }

        // Create the offset values based on the image sizes
        **// THIS IS LINE 453**
        var imgLeft = markerOffset.left - ((imgWidth - marker[0].getComputedTextLength()) / 2);
        var imgTop = markerOffset.top - (imgHeight - (markerHeight / 4));

        // Create an element for each value.img and make it position absolute and set the offset of the marker
        $('.charts-inner').prepend('<div class="series-data series-picture-wrapper ' + hidden + ' image-on-chart" data-id="' + k + '" data-series="' + key + '"  data-position-top="' + (imgTop - $('.app-ui-top').height() - (markerHeight)) + '" data-position-left="' + (imgLeft - ($('.app-ui-menu').width() + 3)) + '" data-hidden="' + hiddenAttr + '" style="z-index: ' + (5555 + z) + '; top:' + (imgTop - $('.app-ui-top').height() - (markerHeight)) + 'px; left:' + (imgLeft - ($('.app-ui-menu').width() + 3)) + 'px; width:' + imgWidth + 'px; height:' + imgDivHeight + 'px"><img src="' + v.img + '" style="width:' + imgWidth + 'px" /><div class="app-tooltip-stock nodisplay">' + v.tooltip + '</div></div>');

    }

})

Answer 1

是的，所以问题不在于 OFFSET，而在于 $('text') 是一个 SVG 元素，在 Safari 中您无法通过 html() 获取其内容。

我把过滤部分改成了

var marker = $('text').filter(function() {

    if($(this)[0].textContent === k) { return $(this) } 

});

它现在正在工作......