html - Safari 不尊重应用于 foreignObject 的缩放

问题描述

以下是 Safari 的一个奇怪且明显有问题的行为（使用版本 11 和 12 测试）。一个<foreignObject>包含的 HTML，在缩放时，仍然以其原始大小显示，即使它的本地用户空间坐标在屏幕上缩放。<svg>即使违反明确的 CSS 规则，HTML 内容也会明显溢出父级。

这里的其他答案指出需要明确设置宽度和高度（我用百分比和绝对单位进行了测试），并且应该设置命名空间（我在<foreignObject>标签本身和单个直接子项上设置它进行了测试)，但到目前为止没有任何帮助。

奇怪的是，开发工具以预期的缩放大小显示标记矩形（浏览器窗口中的叠加层），而报告的大小数字是未缩放的。

这是预期的设置：

svg, foreignObject {
  overflow: hidden;
}
rect {
  fill:yellow;
}
#content {
  position: relative;
  width: 100%;
  height: 100%;
  background: red;
  border-radius: 50%;
}

<svg width="200px" height="200px" viewBox="0 0 400 400">
  <rect width="100%" height="100%" />
  <foreignObject width="400" height="400">
    <div id="content" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>
</svg>

Safari 截图：

使用 transform 属性（也在 parent 上<g>）而不是通过 viewBox 进行隐式缩放没有区别。另外，我玩过绝对和相对尺寸的所有组合

有谁知道如何解决这个问题？

标签： htmlsvgsafari

这似乎与webkit bug 23113有关。到目前为止，我发现的唯一解决方法是将 CSS transform: scale(${scale})（您必须使用 JS 获取当前比例）属性添加到<section>内部foreignObject（可以在marpit-svg-polyfill中找到示例）

html - Safari 不尊重应用于 foreignObject 的缩放

问题描述

解决方案

推荐阅读