为什么Chrome检查器为SVG中的相同尺寸的元素显示不同的尺寸？
汤姆·斯米拉克
在以下代码段中，Chrome检查器报告了div和foreignObject都比rect和节点大50％，即使它们在屏幕上占用的空间相同。Firefox报告这四个大小都相同。是什么导致Chrome报告差异？
<svg viewBox="0 0 300 100" style="width: 300px; height: 100px;">
<rect fill="#f5f5a0" width="244" height="73"></rect>
<foreignObject width="244" height="73">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur quam sapien, in varius ipsum mollis quis.
</div>
</foreignObject>
</svg>Chrome检查器结果：
Firefox检查器结果：
汤姆·斯米拉克
这似乎是由Chrome中的一个已知错误引起的：问题738022：getBoundingClientRect在HiDPI监视器上报告foreignObject子对象的两倍大小。
报告的大小按缩放devicePixelRatio，在我的计算机上为1.5。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
SQL Server中的非确定性数据类型
- 4
Swift 2.1-对单个单元格使用UITableView
- 5
如何避免每次重新编译所有文件？
- 6
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
应用发明者仅从列表中选择一个随机项一次
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
HttpClient中的角度变化检测
- 11
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 12
如何了解DFT结果
- 13
Camunda-根据分配的组过滤任务列表
- 14
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 15
为什么此后台线程中未处理的异常不会终止我的进程？
- 16
构建类似于Jarvis的本地语言应用程序
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 19
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 20
使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面
- 21
使用 text() 獲取特定文本節點的 XPath
我来说两句