我怎样才能在这个圈子的第一行添加一个 select 类型的收音机？

Question

<svg height="334.4" width="334.4">
    <circle cx="167.2" cy="167.2" r="134" stroke="#00ffff" stroke-width=4 fill="#e6ffff" />
    <text text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">
        <tspan x="50%" y="25%" dy="1.2em">1200% DAILY FOR 40 DAYS</tspan>
    </text>
    <text text-anchor="middle" stroke="#000000" stroke-width="0.5px" dy=".3em">
        <tspan x="50%" y="35%" dy="1.2em">Noko 4</tspan>
        <tspan x="50%" y="45%" dy="1.2em">Spent Amount ($):</tspan>
        <tspan x="50%" y="55%" dy="1.2em">Min 60.000,00 - Max 260.000,00</tspan>
        <tspan x="50%" y="65%" dy="1.2em">Daily Profit: 1200%</tspan>
        <tspan x="50%" y="75%" dy="1.2em">No deposit</tspan>
    </text>
</svg>

如何在第一行的圆圈中添加 select 类型的收音机？

Answer 1

利用位置，我们可以做到这一点。我已将您的整个 SVG 包裹在一个 div 中并在 CSS.

之后应用

.parentDiv {
    display: inline-block
    position: relative;
}

.radioButton {
    position: absolute;
    top: 20px;
}

它实际上在 SVG 元素之外。但是位置让它看起来像是在里面。 Check out this pen.

Answer 2

您可以使用 <foreignObject>:

嵌套单选按钮

<svg xmlns="http://www.w3.org/2000/svg" height="334.4" width="334.4">
  <circle cx="167.2" cy="167.2" r="134" stroke="#00ffff" stroke-width="4" fill="#e6ffff" />
  <foreignObject width="100%" height="100%" x="40%" y="15%">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <label>SELECT <input type="radio"/></label>
    </body>
  </foreignObject>
  <text text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">
    <tspan x="50%" y="25%" dy="1.2em">1200% DAILY FOR 40 DAYS</tspan>
  </text>
  <text text-anchor="middle" stroke="#000000" stroke-width="0.5px" dy=".3em">
    <tspan x="50%" y="35%" dy="1.2em">Noko 4</tspan>
    <tspan x="50%" y="45%" dy="1.2em">Spent Amount ($):</tspan>
    <tspan x="50%" y="55%" dy="1.2em">Min 60.000,00 - Max 260.000,00</tspan>
    <tspan x="50%" y="65%" dy="1.2em">Daily Profit: 1200%</tspan>
    <tspan x="50%" y="75%" dy="1.2em">No deposit</tspan>
  </text>
</svg>

添加 xmlns="http://www.w3.org/1999/xhtml" 命名空间将外部对象定义为 html。

我怎样才能在这个圈子的第一行添加一个 select 类型的收音机？

How can I add in this circles a select of type radio on the top line?

html

geometry

select

margin