Safari不遵守应用于外部对象的缩放比例

Question

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

此处的其他答案指出the width and height need to be set explicitly（我用百分比和绝对单位进行了测试）和namespace should be set（我在<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屏幕截图：

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

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

Answer 1

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

Answer 2

我也没有想到任何合适的解决方案，因此我想出了一个小技巧-您需要将svg放入容器中，然后获取容器的宽度和svg的宽度，相应地缩放并正确放置：

if (window['safari'] !== undefined) {
    const svgContainerElement = document.getElementById('svgContainer');
    const svgElement = document.getElementById('svg');

    const zoomLevel = svgContainerElement.clientWidth / 867; // width of the foreign object
    svgElement.style.transform = `scale(${zoomLevel})`;

    const leftOffset = svgContainerElement.getBoundingClientRect().left - 
    svgElement.getBoundingClientRect().left;
    const topOffset = svgContainerElement.getBoundingClientRect().top - 
svgElement.getBoundingClientRect().top;

    svgElement.style.position = `relative`;
    svgElement.style.left = leftOffset;
    svgElement.style.top = topOffset;
}

如果浏览器对样式更改没有正确反应，您可能会被迫重新绘制svg：

const parent = svgElement.parentElement;
if (parent) {
    parent.removeChild(el);
    parent.appendChild(el);
}

这个问题可能要晚几年了，但我希望它会有所帮助，因为到目前为止（2019年11月）这是野生动物园的一个问题