如何在SVG元素内定位Checkbox并按百分比设置位置？

你的定位方案思路可行，但存在语法错误 #

你尝试用「相对定位容器+绝对定位子元素」来嵌套SVG和Checkbox的思路是正确的，但代码里的属性写法不符合规范：

• position、top、left属于CSS样式属性，不能直接作为HTML标签的属性（比如position="relative"），必须放在style属性中声明，否则浏览器无法识别这些样式。

实现Checkbox居中于SVG的正确方案 #

要让Checkbox精准居中在SVG上方/内部，可按以下步骤调整：

1. 核心样式逻辑 #

• 给父容器#my_dataviz设置相对定位，作为内部绝对定位元素的位置基准
• SVG和Checkbox都设置绝对定位，确保Checkbox能叠加在SVG上方
• 用top: 50%; left: 50%; transform: translate(-50%, -50%);实现Checkbox的完美居中（该方法不受Checkbox自身尺寸影响）

2. 完整修正代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    #my_dataviz {
      position: relative;
      display: inline-block; /* 防止容器塌陷，适配SVG尺寸 */
    }
    #click {
      position: absolute;
      background-color: #cccccc;
    }
    #myCheckbox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10; /* 确保Checkbox在SVG上方 */
    }
  </style>
</head>
<body>
  <div id="my_dataviz">
    <svg id="click" xmlns="http://www.w3.org/2000/svg"></svg>
    <input type="checkbox" onclick='check()' id='myCheckbox'>
  </div>

  <script>
    // 视口尺寸设置
    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
      
    const height  = math.min([vw,vh])*0.75; 
    const width   = math.min([vw,vh])*0.75;

    // 初始化SVG
    const svg = d3.select("#click")
      .attr("width", width)
      .attr("height", height)
    
    // 添加圆形
    svg.append("circle")
      .attr("r", height/4)
      .attr("cx", width/2)
      .attr("cy", height/2)
      .attr("fill", "#ff0000")
      .attr("opacity", 0.75)
      .attr("id","circ");

    // 复选框切换颜色逻辑
    function check() {
      const checkbox = d3.select("#myCheckbox")
      d3.select("#circ")
        .attr("fill", checkbox.property("checked") ? "#00ff00" : "#ff0000")
    }
  </script>
</body>
</html>

3. 可选：用D3动态设置位置 #

如果需要基于SVG宽高的百分比动态计算位置，也可以在JS中通过D3设置Checkbox样式：

// 在设置SVG宽高后添加
d3.select("#myCheckbox")
  .style("top", `${height/2}px`)
  .style("left", `${width/2}px`)
  .style("transform", "translate(-50%, -50%)")

内容的提问来源于stack exchange，提问作者J.Galt