通过多个变换获取 svg 元素在 svg 中的位置答案

【问题标题】：Get position of svg element in svg with multiple transforms通过多个变换获取 svg 元素在 svg 中的位置
【发布时间】：2017-04-09 20:36:27
【问题描述】：

我有一个包含圆圈的 SVG 文档。我想在这个圆圈的顶部放置一个绝对定位的 html 元素。圆圈包含一个 cx 和 cy，并且对父元素有几个变换。如何将 SVG 内的位置转换为父 html 元素（普通像素）的坐标空间？

SVG 是由程序生成的，因此我几乎无法控制它，这意味着我需要一个通用的解决方案来处理父元素上的任意数量的变换。

我没有使用 d3 或任何类似的库，所以我正在寻找一种使用纯 JavaScript 解决此问题的方法。这是我的问题的一个简化示例：

<head>
    <style>
        #box {
            background-color: greenyellow;
            position: absolute;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <svg width="1274.2554" height="692.35712" id="svg">
            <g id="viewport" transform="matrix(0.655937472561484,0,0,0.655937472561484,162.2578890186666,57.23719435833714)">
                <g id="layer1" transform="translate(-5.49584,-171.51931)">
                    <g id="elem" transform="translate(34.862286,232.62127)">
                        <circle id="center" cx="19.952429" cy="19.90885" style="fill:#ffcc33" r="20"></circle>
                    </g>
                </g>
            </g>
        </svg>
        <div id="box" ></div>
    </div>

    <script>
        function positionBoxAtCenter() {
            var box = document.getElementById('box');
            var center = document.getElementById(('center'));
            // TODO: get x, y from 'center' so that 'box' can be placed on top of center
            var x = 0, y = 0;
            box.setAttribute('style', 'top: ' + y + 'px; left: ' + x + 'px');
        }
    </script>
</body>

JSFiddle：https://jsfiddle.net/p9pf56sz/

【问题讨论】：

标签： javascript svg

【解决方案1】：

使用getBoundingClientRect()：

var pos = center.getBoundingClientRect();

你可以得到圆的中心：

var x = pos.left + pos.width/2, y = pos.top + pos.height/2;

这里是演示：

function positionBoxAtCenter() {
    var box = document.getElementById('box');
    var center = document.getElementById(('center'));
    var pos = center.getBoundingClientRect();
    var x = pos.left + pos.width/2, y = pos.top + pos.height/2;
    box.setAttribute('style', 'top: ' + y + 'px; left: ' + x + 'px');
}

positionBoxAtCenter();

#box {
    background-color: greenyellow;
    position: absolute;
    width: 100px;
    height: 100px;
}

<body>
    <div id="root">
        <svg width="1274.2554" height="692.35712" id="svg">
            <g id="viewport" transform="matrix(0.655937472561484,0,0,0.655937472561484,162.2578890186666,57.23719435833714)">
                <g id="layer1" transform="translate(-5.49584,-171.51931)">
                    <g id="elem" transform="translate(34.862286,232.62127)">
                        <circle id="center" cx="19.952429" cy="19.90885" style="fill:#ffcc33" r="20"></circle>
                    </g>
                </g>
            </g>
        </svg>
        <div id="box" ></div>
    </div>
</body>

但是，正如您在演示中看到的那样，您将矩形的上/左角（其原点）移动到圆的中心。因此，您还必须计算矩形的中心（并将其与原点的差减去）。

【讨论】：