文字阴影和缩放

Question

我正在尝试为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 World的轮廓较粗，如果我拖动它会留下文字（如果先放大然后拖动）。

在Firefox中，只有顶级的Hello World有一些阴影（而且它并不是真的很明显），但我读到Firefox确实支持文本阴影。

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

由于

Answer 1

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

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

Answer 2

如果您只想在文本周围创建边框，则可以只应用笔划。缺点是它会侵占文本的填充。但解决这个问题的方法是叠加两个文本副本。下面的那个会有红色的笔划而前面的那个没有笔划。

此解决方案不如CSS阴影那么干净，但它可以达到您想要的效果。