хрустящие GridLineDashStyle

Question

В линии сетки, когда установлено значение «ShortDot», или любые точки, всегда два пикселя в высоту в SVG, и исследование говорит, что это может быть исправлено с помощью

а) преобразование (0.5,0.5) - перемещает его половина пиксель так рисование в одном пикселе,

или

б) добавить стиль = 'форма-рендеринга: crispEdges' к элементу

Смотрите демо здесь: http://jsfiddle.net/aerialflyer/o2d9w6up/

Вот SVGElement прототип из Highcharts.js

SVGElement.prototype = {  
    dashstyleSetter: function (value) { 
     var i; 
     value = value && value.toLowerCase(); 
     if (value) { 
      value = value 
       .replace('shortdashdotdot', '3,1,1,1,1,1,') 
       .replace('shortdashdot', '3,1,1,1') 
       .replace('shortdot', '1,1,') 
       .replace('shortdash', '3,1,') 
       .replace('longdash', '8,3,') 
       .replace(/dot/g, '1,3,') 
       .replace('dash', '4,3,') 
       .replace(/,$/, '') 
       .split(','); // ending comma 

      i = value.length; 
      while (i--) { 
       value[i] = pInt(value[i]) * this['stroke-width']; 
      } 
      value = value.join(',') 
       .replace('NaN', 'none'); // #3226 
      this.element.setAttribute('stroke-dasharray', value); 
     } 
    } 
} 

Как это может быть обновлен, чтобы включить либо преобразования, или «стиль» (предпочтительно) ??

т.е. Добавить
this.element.setAttribute ('стиль', 'форма-рендеринга: crispEdges');

Может прототип SVGElement быть обновлен (не удается до сих пор)

// Make grid lines crispt to prevent anti-alias 
SVGElement.prototype['dashstyleSetter'] = SVGElement.prototype.dashstyleSetter = function (value) { 
    var i; 
    value = value && value.toLowerCase(); 
    if (value) { 
     value = value 
      .replace('shortdashdotdot', '3,1,1,1,1,1,') 
      .replace('shortdashdot', '3,1,1,1') 
      .replace('shortdot', '1,1,') 
      .replace('shortdash', '3,1,') 
      .replace('longdash', '8,3,') 
      .replace(/dot/g, '1,3,') 
      .replace('dash', '4,3,') 
      .replace(/,$/, '') 
      .split(','); // ending comma 

     i = value.length; 
     while (i--) { 
      value[i] = pInt(value[i]) * this['stroke-width']; 
     } 
     value = value.join(',') 
      .replace('NaN', 'none'); // #3226 
     this.element.setAttribute('stroke-dasharray', value); 
     this.element.setAttribute('style', 'shape-rendering:crispEdges'); 
    } 
}; 

Highcharts Demo: http://jsfiddle.net/aerialflyer/yj1s5xps/

Посмотрите, как точка это просто длинная серая линия

Answer 1

можно продлить Highcharts и установить рендеринг формы в crispEdges (поскольку рендеринг формы - это атрибут, заданный напрямую, а не в стиле - MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) в dashstyleSetter SVGElement.

Упаковочный:

(function (H) { 
    H.wrap(H.SVGElement.prototype, 'dashstyleSetter', function (proceed) { 
     // Run original proceed method 
     proceed.apply(this, [].slice.call(arguments, 1)); 
     if(arguments[1]) { 
      this.element.setAttribute('shape-rendering', 'crispEdges'); 
     } 
    }); 
}(Highcharts)); 

JSFiddle пример: http://jsfiddle.net/yurn5oz5/

Docs reference for extending Highcharts