Chrome 中的 svg dropshadow 问题：不是仅将阴影添加到图形，而是将阴影添加到实际容器中

【问题标题】：svg dropshadow problem in Chrome: instead of adding the shadow to only the graphic the shadow is being added to the actual containerChrome 中的 svg dropshadow 问题：不是仅将阴影添加到图形，而是将阴影添加到实际容器中
【发布时间】：2011-08-09 11:19:12
【问题描述】：

我正在尝试向 SVG path 添加高斯阴影，但由于某种原因，这在 Chrome 中似乎效果不佳，而不是仅将阴影添加到图形中，阴影被添加到实际容器？这在ff中完美呈现？

如何使它正常工作？

http://jsfiddle.net/NAM8d/2/

【问题讨论】：

它在 Mac OS X 10.7 上的 Chrome 14.0.835.29 dev 中看起来相当不错。 Screenshot
多么奇怪，我在 Windows 上使用 chrome 并得到完全不同的结果！

标签： javascript jquery css svg

【解决方案1】：

Firefox 渲染阴影但截断图像（在您的示例中） Chrome、Safari、Opera - 无阴影一直想知道为什么所有的差异我自己...

但我发现 Opera 可以很好地渲染阴影 - 对于从 Illustrator CS5 导出的 SVG - 尽管 Safari、Chrome 和 Firefox 不会... 猜想 SVG 成为主要的 Web 图形文件类型还为时过早（备受期待）虽然对所有差异感到遗憾...... Chrome 是我发现的最流畅的 SVG 动画

【讨论】：

Firefox 的渲染是正确的。如果您没有为 svg 元素提供宽度或高度，则应根据 CSS 规范将其调整为默认替换元素大小 300 x 150。