1

I'm trying to implement a text border but the results aren't what I expected. Is there a way to make it so that text borders remain constant when zooming in and out? For example, in this jsfiddle when I zoom in and out it leaves a shadow from the blue and the white stroke is noticeable even though the background is white.

Here is the jsfiddle: http://jsfiddle.net/F3PhZ/1/

and the relevant code:

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");

The effect I want is based off of: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html so that when there are lines of different colors the text that overlaps the line will be more noticeable because of the white border and the text that doesn't overlap looks normal.

Thanks!

4

1 回答 1

0

您可以使用 .attr("vector-effect", "non-scaling-stroke") 它适用于 Opera 和 Webkit，最近已在 Firefox 上修复以在文本上正常工作 - 我认为您需要 Firefox 24。

但是，IE 不支持 vector-effect="non-scaling-stroke"，因此如果您想支持 IE9 或 IE10，则必须在 javascript 中编写一些代码，在缩放时反向固定笔画宽度。

于 2013-07-17T00:41:21.987 回答