html - 当我使用外部样式表时，Firefox SVG 图像被切断

Question

鉴于http://dpaste.com/756156/上的 SVG 文件，当我在<object>or<embed>标记中显示它时，它在 Firefox 中加载的大约一半时间，图像的底部被切断。使用内联 CSS 可以很好地呈现它，Chrome 和 IE9 也可以正常呈现。

我已经看到将“100%”的宽度和高度属性添加到 SVG 标记的建议，但这并没有帮助。有任何想法吗？

Answer 1

我自己刚刚遇到这个问题 [svg 被 Firefox 剪辑] 我找到了一个解决方案。这有点随机，没有逻辑，但它为我解决了这个问题。

我的 svg 是使用 Illustrator 使用贝塞尔曲线绘制的简单“云”形状。无论我画了多少次，浏览器都会裁剪右侧（类似于气泡形状）。再多的调整参数（例如 viewBox、x、y、宽度、高度）都无法修复它。- 它仍然被剪辑。事实上，通过调整这些参数，很明显它不是由它们中的任何一个引起的。

解决方案是向曲线添加更多数据。我只是在被剪裁的曲线上添加了另一个锚点，然后在 Firefox 中正确渲染。

随机但真实。希望这可以帮助

Answer 2

在处理多个图表库之后，这对我有用。

首先，将图表的 SVG 设置为可见性：隐藏；在 CSS 例如（#pie_chart .ct-chart-pie {visibility: hidden;} ）

然后重新渲染图表并将可见性更改为可见。

function show_popup(){ 
   Chartist.Pie('#pie_chart', data, options, responsiveOptions); 
   $("#pie_chart .ct-chart-pie").attr("style","visibility:visible !important;");   
}; 
window.setTimeout( show_popup, 1 );

Answer 3

这可能是由于 Firefox 在加载样式表之前渲染了 SVG，然后没有意识到它需要更新它。尝试更改onload事件 (JavaScript) 中 SVG 标记的类名，如本页建议的那样：http: //ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

如果这不起作用？elm.parentNode.innerHTML += ''尝试按照此 StackOverflow 问题的评论中的建议完全重新生成元素： https ://stackoverflow.com/a/2922034/638544

Answer 4

这最近由 bug 1063073 修复。该修复程序将出现在 Firefox 34 中，之后将不再需要解决方法。