导出的 SVG 文件在浏览器中的呈现方式不同答案

【问题标题】：Exported SVG file rendered differently in browsers导出的 SVG 文件在浏览器中的呈现方式不同
【发布时间】：2015-09-28 01:11:06
【问题描述】：

我无法理解导致this file 在浏览器中呈现不同的原因（Chrome：仅轴可见，Safari 和 FF 显示主要内容和轴）。

这是从DC.js example page 导出的图，第一个图，使用SVG-crowbar2。

基本上，Crowbar 只是查找应用于 SVG 元素的任何外部 css 规则，并将它们作为内联 css 应用。问题是什么 css 规则导致元素显示不同？

【问题讨论】：

标签： css google-chrome svg dc.js

【解决方案1】：

问题似乎是由#yearly-bubble-chart-clip > rect 元素引起的。它具有将width 和height 设置为auto 的内联样式。在 Chrome 中，这会覆盖 width 和 height 属性，并导致剪切路径为 0 像素 x 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

【讨论】：

【解决方案2】：

如果您从yearly-bubble-chart-clip 剪辑路径中的rect 中删除width:auto; 和height:auto;，您的chart-body 似乎会出现在Chrome 中。

【讨论】：