0

我正在尝试为 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 而不是实际文本，如果是这样，是否有解决方法？

谢谢

4

2 回答 2

0

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

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

于 2013-07-19T18:25:48.293 回答
0

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

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

于 2013-07-18T18:30:34.927 回答