Текст SVG имеет низкое качество?

Я построил некоторый текст SVG, используя D3, но по какой-то причине он довольно низкого качества. Это в Chrome на OSX.

Это код:

.hover-text { 
   stroke: black;
}
var tipHeadText = hoverLineGroup.append('text')
   .attr("class", "hover-text")
   .attr("text-anchor", "middle")
   .attr('font-size', '10px')
   .attr('y', -45).text("Last data point:")

Вот как это выглядит, выглядя довольно нечетким:

Есть ли что-нибудь, что я могу сделать, чтобы сделать его более четким? Или мне лучше использовать HTML?

Ответ 1

Похоже, вы настраиваете штрих на черный? Инсульт представляет собой внешнюю границу текста, где fill задает внутренний цвет. Подумайте о том, чтобы использовать fill и установить ход в none:

.fuzzy {
    stroke: black;
}
.crisp {
    fill: black;
    font-weight: bold;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text class="fuzzy" font-size="10px" x="0" y="15" fill="red">I love SVG</text>
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text class="crisp" font-size="10px" x="0" y="15" fill="red">I love SVG</text>
</svg>

jsFiddle: http://jsfiddle.net/reblace/RGEXc/1/ Здесь хорошая ссылка на текст svg: http://www.hongkiat.com/blog/scalable-vector-graphics-text/

Если это не соответствует значению, то, возможно, jsFiddle вашего собственного демонстрации проблемы поможет сузить вопрос?

Ответ 2

Вместо hoverLineGroup.append('text')

Добавить текст в родительскую переменную svg, то есть.

<svg></svg>

В JavaScript:

var svg = d3.select("svg")
svg.append('text')