Question

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

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

Answer 1

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

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

解决方案是向曲线添加更多数据。我只是在曲线上添加了另一个锚点，它正在被剪切，并且它会在firefox中正确渲染。

随机但真实。希望这有帮助

Answer 2

这可能是因为Firefox在加载样式表之前呈现SVG，然后没有意识到它需要更新它。尝试按照此页面的建议更改onload事件（JavaScript）中SVG标记的类名：http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

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

Answer 3

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

首先，将图表的SVG设置为visibility：hidden;在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 4

最近由bug 1063073解决了这个问题。该补丁将出现在Firefox 34中，之后将不再需要解决方法。

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

4 个答案: