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));