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

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

How can I add in a circle a select of type radio on the first line?

Solution

Using positions, we can do the trick. I have wrapped your entire SVG inside a div and applied following CSS.

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

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

It's actually outside SVG element. But positions make it look like it's inside. Check out this pen.