Safari不遵守适用于foreignObject的缩放 [英] Safari is not respecting scaling applied to a foreignObject

问题描述

以下是Safari的一种奇怪且明显的错误行为(已通过版本11和12测试).缩放后的包含HTML的<foreignObject>仍以其原始大小显示，即使其本地用户空间坐标是相对于屏幕缩放的.即使明显的CSS规则，HTML内容也会明显地使父<svg>溢出.

The following is a strange, and clearly buggy behavior of Safari (tested with versions 11 & 12). A <foreignObject> containing HTML, when scaled, still displays at its original size, even when its local userspace coordinates are scaled against the screen. The HTML content will visibly overflow the parent <svg>, even against explicit CSS rules.

此处的其他答案指出，需要明确设置宽度和高度(我同时测试了百分比和绝对单位)，并且命名空间应设置(我测试过将其设置在<foreignObject>标记本身以及单个直子上)，但到目前为止没有任何帮助.

Other answers around here point out that the width and height need to be set explicitly (I tested with both percentages and absolute units), and the namespace should be set (I tested with setting it on the <foreignObject> tag itself, and on a single immediate child), but nothing so far has helped.

奇怪的是，开发人员工具会按预期的缩放比例大小显示标记矩形(浏览器窗口中的叠加层)，而报告的尺寸数字是未缩放比例的数字.

The strange thing is that dev tools display the marking rectange (the overlay in the browser window) at its intended, scaled size, while the reported numbers for the size are the unscaled ones.

这是预期的设置:

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屏幕截图:

Safari screenshot:

使用转换属性(也在父级<g>上)而不是通过viewBox进行隐式缩放没有区别.另外，我也尝试过绝对尺寸和相对尺寸的所有组合

Using a transform attribute (also on a parent <g>) instead of implicit scaling via viewBox makes no difference. Also, I have played around with all combinations of absolute and relative sizings

有人知道如何解决此问题吗?

Does anyone have an idea how to get around this issue?

推荐答案

这似乎与 marpit-svg-polyfill )

This seems to be related to webkit bug 23113. The only workaround I've found so far is adding a CSS transform: scale(${scale}) (where you'd have to get the current scale using JS) property to a <section> inside foreignObject (an example can be found in marpit-svg-polyfill)

这篇关于Safari不遵守适用于foreignObject的缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！