Safari中的SVG：元素在翻译时定位不正确

Question

我正在尝试将SVG形状设为dropzone，并且它在Chrome / Firefox中运行良好，但在Safari上测试时，我遇到了一种奇怪的行为，我正在寻找一种方法来解决这个问题。

问题（如下面的代码和此小提琴https://jsfiddle.net/tp5e98rs/所示）是当viewBox宽度/高度与视口宽度/高度（第一个SVG）不匹配时，翻译的元素未正确定位在检查员中查看时。如果检查第一个矩形，则蓝色突出显示不直接在其上，但如果您检查第二个矩形，则蓝色突出显示为，如您在附加图像中看到的那样。两个SVG之间的区别在于，在一个视图框中，视图框与视图端口不匹配，在另一个视图框中它们匹配。如果您在Chrome中执行相同操作，则两种情况下的突出显示都是正确的。

这是从翻译的矩形制作dropzones的问题，因为dropzone最终会显示不正确的高亮显示。

解决此问题的解决方法的任何想法？

<svg width="100" height="100" viewBox="0 0 200 200">
    <rect transform="translate(20 20)" width="100" height="100" fill="#aaeeee"></rect>
</svg>

<svg width="100" height="100" viewBox="0 0 100 100">
   <rect transform="translate(10 10)" width="50" height="50" fill="#aaeeee"></rect>
</svg>