Как я могу добавить в этих кругах выбор типа радио в верхней строке? - PullRequest
Новая
       10

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

0 голосов
/ 28 мая 2018 
<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>

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

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

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

0 голосов
/ 28 мая 2018

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

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

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

Это на самом деле вне элемента SVG.Но с позиций это выглядит так, будто оно внутри. Проверьте эту ручку .

...