svg和d3中的文本边框

Question

我试图实现文本边框，但结果并不是我所期望的。有没有办法让它在放大和缩小时保持文本边框不变？例如，在这个jsfiddle中，当我放大和缩小时，它会留下蓝色的阴影，即使背景为白色，白色笔划也很明显。

这是jsfiddle：http://jsfiddle.net/F3PhZ/1/

和相关代码：

canvas.append("text")
      .text("Jennifer Lawrence")
      .attr("font-family", "Arial")
      .attr("font-weight", "bold")
      .attr("font-size", "16px")
      .attr("x", 100)
      .attr("y", 100)
      .attr("fill", "blue")
      .attr("stroke", "white")
      .attr("stroke-width", ".2px");

我想要的效果是基于： http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html这样当有不同颜色的线条时，由于白色边框和不重叠的文字看起来正常，与线条重叠的文字会更加引人注目。

谢谢！

Answer 1

你可以使用.attr（“矢量效果”，“非缩放笔画”）它可以在Opera和Webkit上运行，最近已在Firefox上修复，可以在文本上正常工作 - 我想你需要Firefox 24 。

然而，IE不支持

vector-effect =“non-scaling-stroke”，因此如果你想支持IE9或IE10，你必须在javascript中编写一些代码，以便在缩放时反向修正笔画宽度。