Question

我有一个包含圆圈的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/

Answer 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>

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

通过多次转换获取svg中svg元素的位置

1 个答案: