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可能有助于缩小这个问题吗？

Answer 2

而不是hoverLineGroup.append('text')

将文本附加到父svg变量， 即。

<svg></svg>

在JavaScript中：

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