svg - SVG text is poor quality?

Question

I've constructed some SVG text using D3, but for some reason it's quite low quality. This is in Chrome on OSX.

This is the code:

.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:")

This is how it renders, looking quite fuzzy:

Is there anything I can do to make it crisper? Or would I be better off using HTML?

Answer 1

看起来您将笔画设置为黑色？Stroke 表示文本的外边框，其中 fill 设置内部颜色。考虑改用填充并将描边设置为无：

.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')