Mobile Transform Origin Property 与 Web 不一致

Question

我有一个正在开发的应用程序，它允许用户在 SVG 上放置“引脚”。这些引脚可以在底层 SVG 周围移动，坐标保存在数据库中。 图钉还有一个底部中心的“质心”，我存储图钉尖端的坐标，而不是图钉图标的 0,0 原点。

我正在尝试实现一项功能，当缩小底层 SVG 时，允许引脚显示更大，放大时缩小（想想谷歌地图，如果你查看所有餐厅的缩小 map，然后放大，引脚变得更小，更分散）。

我在桌面 web 上有这个功能，见下图

然而，在移动设备上，相同的代码导致图钉存在于不同的位置，并且在缩放时我可以看到它们缩小到左上角，而不是像桌面客户端那样的中心底部。

创建缩放 styles 和逻辑的 JS 代码：

 if (instance) { instance.dispose(); instance = panzoom($('#partialDiv')[0]); var pins = Array.from(document.querySelectorAll('.draggable')); instance.on('transform', function(pz) { var transform = instance.getTransform(); pins.forEach(pin => { if (transform.scale > 10 && transform.scale < 18) { pin.setAttribute("transform", 'matrix(' + 15 / transform.scale + ', 0, 0, ' + 15 / transform.scale + ', ' + pin.transform.baseVal[0].matrix.e + ', ' + pin.transform.baseVal[0].matrix.f + ')'); var pinStyle = pin.style; pin.setAttribute("transform-origin", "" + pin.getBBox().width / 2 + " " + pin.getBBox().height + "0px"); pinStyle.transformBox = 'fill-box'; pin.style['-webkit-transform-origin-x'] = '50%'; pin.style['-webkit-transform-origin-y'] = 'bottom'; pinStyle.transformBox = 'fill-box'; } else if (transform.scale > 18) { pin.setAttribute("transform", 'matrix(0.8, 0, 0, 0.8, ' + pin.transform.baseVal[0].matrix.e + ', ' + pin.transform.baseVal[0].matrix.f + ')'); var pinStyle = pin.style; pin.setAttribute("transform-origin", "" + pin.getBBox().width / 2 + " " + pin.getBBox().height + "0px"); pinStyle.transformBox = 'fill-box'; pin.style['-webkit-transform-origin-x'] = '50%'; pin.style['-webkit-transform-origin-y'] = 'bottom'; } else { pin.setAttribute("transform", 'matrix(2, 0, 0, 2, ' + pin.transform.baseVal[0].matrix.e + ', ' + pin.transform.baseVal[0].matrix.f + ')'); var pinStyle = pin.style; pin.setAttribute("transform-origin", "" + pin.getBBox().width / 2 + " " + pin.getBBox().height + "0px"); pinStyle.transformBox = 'fill-box'; pin.style['-webkit-transform-origin-x'] = '50%'; pin.style['-webkit-transform-origin-y'] = 'bottom'; } }); }); }

为什么这些图钉在 Chrome 桌面和 Chrome IOS 上显示在不同的来源？ 其他桌面浏览器和移动设备上的 Safari 也是如此。 我已经尝试了 webkit styles 的变体，但它似乎并没有改变这种行为。 非常感谢任何建议。

Answer 1

经过数小时的故障排除后，我了解到 IOS webkit 16.2+ 上存在一个错误，该错误不允许 transform-origin 使用 transform 属性。 只有在 CSS 中执行的转换才能使用转换源样式。

对于遇到与我类似问题的任何人的有用资源： https://caniuse.com/mdn-svg_attributes_presentation_transform-origin