在浏览器中呈现的导出SVG文件不同。

Question

我在理解是什么原因导致此文件在浏览器中呈现不同方面存在问题（Chrome：仅显示坐标轴，Safari和FF则显示主要内容和坐标轴）。

这是从DC.js示例页面的第一张图表中，使用SVG-crowbar2导出的图形。

基本上，Crowbar只是寻找应用于SVG元素的任何外部CSS规则，并将其作为内联CSS应用。问题是哪些CSS规则会导致元素以不同的方式显示？

- amergin

Answer 1

这个问题似乎是由于#yearly-bubble-chart-clip > rect元素引起的。它具有内联样式，将width和height设置为auto。在Chrome中，这将覆盖width和height属性，并导致剪辑路径为0像素乘以0像素。

如果您删除这些样式，就像这样，在Chrome中将会正常工作。

<rect width="888" height="198" transform="translate(-0, -0)" style="overflow-x:visible;overflow-y:visible;perspective-origin:0px 0px;-webkit-perspective-origin:0px 0px;transform-origin:0px 0px;-webkit-transform-origin:0px 0px;"/>

JSFiddle Example

- Alexander O'Mara

Answer 2

如果你从yearly-bubble-chart-clip剪辑路径中的rect中移除了width:auto;和height:auto;，那么你的chart-body在Chrome浏览器中似乎可以正常显示。

- zgood