Как добавить в эти кружки выбор типа радио в верхней строке?

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

Как добавить в кружок выбор типа радио в первой строке?

Думаю, вопрос довольно широкий. Вы можете дать контекст?

— 28.05.2018 19:06

html select margin geometry

28.05.2018 17:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используя позиции, мы можем добиться цели. Я завернул весь ваш SVG в div и применил его, следуя CSS.

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

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

На самом деле это вне элемента SVG. Но позиции делают вид, что он внутри. Посмотри на эту ручку.

28.05.2018 18:35

Вы можете вложить переключатель с помощью <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.

Не знал об этом теге foreignObject. Спасибо друг :)

— 29.05.2018 11:02

Я починил это. Вы должны включить пространство имен для foreignObject.

— 07.06.2018 03:08

29.05.2018 00:37