文字阴影和缩放答案

【问题标题】：Text shadows and zooming文字阴影和缩放
【发布时间】：2013-07-20 02:25:48
【问题描述】：

我正在尝试为 svg 文本应用文本阴影，但对于 Firefox 和 chrome 来说有点问题，但我不知道为什么。我正在尝试使用它们在文本周围创建边框。

这是我的 jsfiddle：http://jsfiddle.net/f3m8Z/

这是我用于文本的 css：

text-shadow: 0px -1px 5px red,     
     0px  1px 5px red,    
    -1px  0px 5px red,     
     1px  0px 5px red,    
    -1px -1px 5px red, 
    -1px  1px 5px red,     
     1px -1px 5px red,     
     1px  1px 5px red;

在 Chrome 中，如果我放大和缩小某些 Hello Worlds 的轮廓较粗，并且如果我将其拖动到周围会留下文本（如果先放大然后拖动）。

在 Firefox 中，只有顶部的 Hello World 有一些阴影（甚至不明显），但我读到 Firefox 确实支持文本阴影。

问题是因为文本是 svg 而不是实际文本，如果是，是否有解决方法？

谢谢

【问题讨论】：

您还可以使用 SVG 过滤器将阴影应用到 SVG 文本

标签： css svg d3.js

【解决方案1】：

SVG 文本是 not support text-shadow。好消息是，这可能会被添加到 SVG 2 中，因此将来会在某个时候得到支持。

一种解决方法是使用<foreignObject> 嵌入html 文本，但这在IE9 或IE10 中不起作用，因为它们都不支持<foreignObject>

【讨论】：

【解决方案2】：

如果您只是想在文本周围创建一个边框，您可以只应用一个笔触。缺点是会侵占文本的填充。但解决方法是覆盖文本的两个副本。下面的有红色笔划，前面的没有笔划。

这个解决方案不像 CSS 阴影那么干净，但它会达到你想要的效果。

【讨论】：