通過多次轉換獲取svg中svg元素的位置

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 個解決方案

解決方案1
3 已采納 2017-04-09 12:36:27

通過多次轉換獲取svg中svg元素的位置

問題描述

1 個解決方案

解決方案1 3 已采納 2017-04-09 12:36:27

解決方案1
3 已采納 2017-04-09 12:36:27