我正在开发一个应用程序，它允许用户在SVG上放置“大头针”。这些大头针可以在底层SVG中移动，坐标保存在数据库中。大头针还有一个“质心”，即底部中心。我存储大头针尖端的坐标，而不是大头针图标的0，0原点。
我正在尝试实现一个功能，它将允许大头针在缩小底层SVG时显示得更大，在放大时显示得更小（想想谷歌Map，如果你看一张缩小的所有餐馆的Map，然后放大，大头针会变得更小，更分散）。
我有这个功能工作在桌面网络，见下图

然而，在移动的上，相同的代码导致引脚存在于不同的位置，当缩放时，我可以看到它们按比例缩小到左上角，而不是像桌面客户端那样的中底部。

创建缩放样式和逻辑的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风格的变体，但似乎没有改变这种行为。非常感谢您的任何建议。