Highstock Navigator 插件无法在 Firefox 中呈现

Question

我为 Highstock Navigator 编写的一个小插件遇到了问题。这意味着只是在其内置选项允许的范围之外设置导航器的样式。该插件如下所示：

(function (H) {
    H.wrap(H.Scroller.prototype, 'init', function (proceed) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      //console.log("drawing scroller: ", this);
    });
    H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed) {
      //console.log("drawing handle: ", this);
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));


    H.each(this.handles, function (handle,index) {
      var element = handle.element

      var offsetX = -8
      var centerPoint = 0;
      if(index == 0) {
                                                    ///topleft////     ///topright////       ///middleright////     ///bottomright////     ///bottomleft///      ////middleleft
             $(element).html('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(8+offsetX)+' 9.5 L'+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L'+(0+offsetX)+' 9.5"  stroke-width="0"></path>')                                                    
            // element.innerHTML = '<polygon fill="#333333" points="'+(7+offsetX)+',0    '+(15+offsetX)+',0     '+(8+offsetX)+',9.5    '+(15+offsetX)+',20   '+(7+offsetX)+',20     '+(0+offsetX)+',9.5"/>'
      }
      else {

             offsetX = -14                                                  ///topleft////     ///topright////       ///middleright////     ///bottomright////     ///bottomleft///      ////middleleft
             $(element).html('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(22+offsetX)+' 9.5 L '+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L '+(14+offsetX)+' 9.5" stroke-width="0"></path>')
             //element.innerHTML = '<polygon fill="#333333" points="'+(7+offsetX)+',0    '+(15+offsetX)+',0     '+(22+offsetX)+',9.5    '+(15+offsetX)+',20   '+(7+offsetX)+',20     '+(14+offsetX)+',9.5"/>'

      }
      $(element).bind('mouseover',function() {
        $(this).find('path').attr('fill', '#50504e');     
      }) 
      $(element).bind('mouseout',function() {
        $(this).find('path').attr('fill', '#333333');     
      })
      $(element).attr('transform', "translate("+handle.translateX+','+(handle.translateY-2)+')')
      //$(element).addClass('custom_scroll_handle');
  })
});
}(Highcharts));

这个插件在 Chrome 中运行良好，它将导航器绘制为一个实心框，左右手柄有两个箭头。它看起来像这样：

但是在 Firefox 中，相同的 svg 块无法呈现。我已经验证了实际的 svg 在代码检查器中看起来是一样的，并且在 Firefox 中没有明显的样式添加会导致它不显示。我还尝试将默认句柄 svg 复制并粘贴到插件中，以查看问题是否与设置 svg 坐标的方式有关，但即使是默认句柄 svg 在 Firefox 中由插件绘制时也会失败。当我将鼠标悬停在 Firefox 中的左侧或右侧句柄路径元素上时，它显示它位于 svg 阶段的右上角，高度和宽度为 0。这是 Firefox 中同一页面的图片：

有没有人知道是什么原因导致它没有出现？

Answer 1

好的，我发现了问题，以防其他人遇到此问题。

问题在于插件附加 svg 的方式。因为我使用 innerHTML 或 jquery.html() 来附加内容，Firefox 显然将其视为无样式的自定义 html 标记而不是 svg 元素。使用来自这个答案jquery's append not working with svg element? 的 parseSVG 方法和 appendChild 修复了 firefox 中的问题。

这是工作插件：

(function (H) {
H.wrap(H.Scroller.prototype, 'init', function (proceed) {
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  //console.log("drawing scroller: ", this);
});
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed) {
  //console.log("drawing handle: ", this);
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));


  H.each(this.handles, function (handle,index) {
      var element = handle.element

      var offsetX = -8
      var centerPoint = 0;
      if(index == 0) {
          element.innerHTML = ''                               ///topleft////      ///topright////   ///middleright////  ///bottomright////    ///bottomleft///  ////middleleft
             element.appendChild(parseSVG('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(8+offsetX)+' 10 L'+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L'+(0+offsetX)+' 10"  stroke-width="0"></path>'))                                                    


      }
      else {
            element.innerHTML = ''
             offsetX = -14                              ///topleft////     ///topright////       ///middleright////     ///bottomright////     ///bottomleft///      ////middleleft
            element.appendChild(parseSVG('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(22+offsetX)+' 10 L '+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L '+(14+offsetX)+' 10" stroke-width="0"></path>'))

      }
      $(element).bind('mouseover',function() {
        $(this).find('path').attr('fill', '#50504e');     
      }) 
      $(element).bind('mouseout',function() {
        $(this).find('path').attr('fill', '#333333');     
      })
      $(element).attr('transform', "translate("+handle.translateX+','+(handle.translateY-2)+')')
  })
});
}(Highcharts));