无法通过 vh/vw 进行翻译 - 我需要它来响应，如何将 vh/vw 转换为 px？

Question

我正在使一个半圆在另一个圆内居中。

我希望它具有响应性，因此浏览器中的更改使元素保持在它们需要的中心位置。

我的想法是在另一个圆圈中将两个半圆形按钮相互叠放。

这是我目前所拥有的。

const dims = {height: '80vh', width: '90vw', radius: '7vw'};
const cent = {x: '50vw', y: '35vh'};




const svg = d3.select('#button-box');
const width = svg.attr('width');
const height = svg.attr('height');
console.log(width)


svg.append('circle')
    .attr('r', dims.radius)
    .attr('cx', cent.x)
    .attr('cy', cent.y)
    .attr('fill', '#0000a0')
    .attr('stroke', 'green')

const g = svg.append('g')
    .attr('transform', `translate(${width /2}), ${height /2}`);

g.append('path')
    .attr('d', d3.arc()({
        innerRadius: 0,
        outerRadius: 100,
        startAngle: Math.PI / 2,
        endAngle: Math.PI * 3/2
    }))
    .attr('fill', 'whitesmoke')

    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="js/jonsIdea.js"></script>

<div class="jonsIdea">
        <div class="canvas">
            <h1>Please select your businesses</h1>
            <svg id='button-box' width="90vw" height="80vh">

            </svg>
        </div>
    </div>

谁能帮我将我的 vh/vw 宽度/高度参数动态转换为像素，以便我可以居中并调整半圆？谢谢

Answer 1

你想要这样的想法吗？你可以为每个路径添加一个点击事件列表器。

更新：

现在该示例具有 onclick 事件。

document.getElementById("idPathRed").onclick = (f => console.log('click red'));
document.getElementById("idPathGreen").onclick = (f => console.log('click green'));
document.getElementById("idPathBlue").onclick = (f => console.log('click blue'));

<div style="display: flex;   padding: 20px;   justify-content: center; align-items:center; background-color: lightblue">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116px" height="116px" viewBox="0 0 4800965 4800965">
                <path id="idPathRed" style="fill:red" d="M2400483 2400483l2393194 0c0,1321728 -1071466,2393194 -2393194,2393194l0 -2393194z" />
                <path id="idPathGreen" style="fill: green" d="M2400483 2400483l-2393195 0c0,-1321729 1071466,-2393195 2393195,-2393195 1321728,0 2393194,1071466 2393194,2393195l-2393194 0z" />
                <path id="idPathBlue" style="fill:blue"  d="M2400483 2400483l-2393195 0c0,1321728 1071466,2393194 2393195,2393194l0 -2393194z" />
            </svg>
</div>
</div>