SVG文字质量差？

Question

我用D3构建了一些SVG文本,但由于某种原因它质量很差.这是在OSX上的Chrome中.

这是代码:

.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？

Answer 1

看起来你将笔画设置为黑色？描边表示文本的外边框,其中填充设置内部颜色.考虑使用fill而不是将stroke设置为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可能有助于缩小问题范围吗？