gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 12:24:46 25 4
gpt4 key购买 nike

我无法理解导致 this file 的原因在浏览器中以不同方式呈现(Chrome:只有轴可见,Safari 和 FF 显示主要内容和轴)。

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

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

最佳答案

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

关于css - 导出的 SVG 文件在浏览器中呈现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31321227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com