移动端与Web端SVG Pin的Transform Origin属性不一致问题求助

我开发了一款支持在SVG上放置、移动Pin标记的应用，标记的尖端坐标会存储到数据库（而非标记图标自身的(0,0)原点），变换原点设为底部中心。核心需求是实现类似谷歌地图的标记缩放逻辑：SVG缩小时标记放大，SVG放大时标记缩小。该功能在桌面Web端正常，但在移动端（iOS Chrome、Safari等）出现标记位置偏移，缩放时以左上角为原点，而非预期的底部中心。尝试调整webkit相关样式后问题仍未解决，附上实现缩放逻辑的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';

            }

        });
    });
}

问题根源 #

• transform-origin属性值错误：代码中设置transform-origin时，拼接了pin.getBBox().height + "0px"，多了一个"0"，导致原点偏移到超出元素范围的位置。桌面端浏览器可能有容错机制，移动端严格解析后暴露了偏移问题。
• SVG与CSS变换属性冲突：同时使用SVG原生transform-origin属性和CSS的-webkit-transform-origin，移动端WebKit内核浏览器对SVG元素的CSS变换支持存在优先级差异，导致设置未生效。
• 矩阵变换未做坐标补偿：直接复用原始平移值e和f，没有考虑缩放时因原点变化带来的位置偏移，无法保持标记尖端坐标稳定。

具体修复步骤 #

1. 修正transform-origin拼写错误
   将pin.getBBox().height + "0px"改为pin.getBBox().height + "px"，确保原点准确设置在元素底部中心。

2. 统一使用CSS控制变换原点
   移除SVG的transform-origin属性设置，仅保留CSS样式，确保移动端浏览器正确识别：

   const pinStyle = pin.style;
   pinStyle.transformOrigin = '50% 100%'; // 等价于bottom center
   pinStyle.transformBox = 'fill-box';
   pinStyle.webkitTransformOrigin = '50% 100%';
   pinStyle.webkitTransformBox = 'fill-box';
   

3. 重新计算矩阵变换的平移量
   缩放时根据元素尺寸和缩放比例，补偿坐标偏移以保持尖端位置不变（假设标记尖端原始坐标已存储在元素自定义属性data-tip-x和data-tip-y中）：

   const bbox = pin.getBBox();
   let scaleFactor;
   if (transform.scale > 10 && transform.scale < 18) {
       scaleFactor = 15 / transform.scale;
   } else if (transform.scale > 18) {
       scaleFactor = 0.8;
   } else {
       scaleFactor = 2;
   }
   // 计算缩放后需要补偿的偏移量
   const offsetX = (bbox.width / 2) * (1 - scaleFactor);
   const offsetY = bbox.height * (1 - scaleFactor);
   // 从自定义属性获取尖端原始坐标
   const tipX = parseFloat(pin.dataset.tipX);
   const tipY = parseFloat(pin.dataset.tipY);
   // 新的平移坐标 = 原始尖端坐标 + 偏移量
   const newE = tipX + offsetX;
   const newF = tipY + offsetY;
   pin.setAttribute("transform", `matrix(${scaleFactor}, 0, 0, ${scaleFactor}, ${newE}, ${newF})`);
   

4. 移除冗余样式设置
   删除代码中重复的pinStyle.transformBox = 'fill-box'，减少无效代码。

内容的提问来源于stack exchange，提问作者Marc Pfister