导出的 SVG 文件在浏览器中呈现不同
Exported SVG file rendered differently in browsers
我无法理解导致 this file 在浏览器中以不同方式呈现的原因（Chrome：只有轴可见，Safari 和 FF 显示主要内容和轴）。
这是从DC.js example page, first figure, using SVG-crowbar2导出的人物。
基本上，Crowbar 只是查找应用于 SVG 元素的任何外部 css 规则，并将它们作为内联 css 应用。问题是什么 css 规则导致元素显示不同？
问题似乎是由 #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;"/>
如果您从 yearly-bubble-chart-clip 剪辑中的 rect 中删除 width:auto; 和 height:auto;，您的 chart-body 似乎会出现在 Chrome 中路径。
我无法理解导致 this file 在浏览器中以不同方式呈现的原因（Chrome：只有轴可见，Safari 和 FF 显示主要内容和轴）。
这是从DC.js example page, first figure, using SVG-crowbar2导出的人物。
基本上，Crowbar 只是查找应用于 SVG 元素的任何外部 css 规则，并将它们作为内联 css 应用。问题是什么 css 规则导致元素显示不同？
问题似乎是由 #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;"/>
如果您从 yearly-bubble-chart-clip 剪辑中的 rect 中删除 width:auto; 和 height:auto;，您的 chart-body 似乎会出现在 Chrome 中路径。