Как превратить <круг> (это внутри svg) в флажок?

Question

ЧАСТЬ 1 - Итак, у меня есть группа <circle> внутри SVG, и я хочу, чтобы эти круги были флажками. И после этого я хочу:

ЧАСТЬ 2 - Если нажать на кружок 1 (который теперь является флажком), то он отмечен. Но все остальные круги теперь не проверяются.

Вот что я уже пробовал:

ЧАСТЬ 1 - Превращение SVG в флажок:

<circle opacity="0.5" cx="842" cy="451.814" r="25.582" class="svg_spot" id="1" fill="#FFB60C" >
        <animate attributeName="r" values="25.582; 33; 25.582" keyTimes="0; 0.5; 1" begin="0s"  dur="1s" repeatCount="indefinite" calcMode="linear" />
        <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" value="spot1">   
</circle>

ЧАСТЬ 2 -

$('input[name=spot]').click (function (){
        $(this).attr('checked', true);
        $('input[name=spot]').not(this).attr('checked', false);
});

Спасибо за ваше время, ребята. Буду признателен за любую помощь!

svg checkbox input

0

Nuno Miguel Costa 3 Май 2019 в 03:23

Answer 1

Возможно заставить это работать без любого Javascript.

Как это работает:

Поместите SVG в метку ввода. Нажатие на SVG (т. Е. Метку) активирует поле.
Сделайте фактическое поле <input> невидимым, чтобы все, что вы видите, было меткой.
Стиль SVG зависит от того, выбрано ли поле, с помощью псевдо-селектора :checked.

// just here to prove that the form value is changing
// prints value of spot field when inputs change
document.querySelectorAll("#spot1, #spot2, #spot3")
        .forEach((elem) => elem.addEventListener("change", (evt) => console.log(document.myform.spot.value)));

.common_selector {
  position: absolute;
  opacity: 0;
}

.common_selector + label svg {
  width: 50px;
  height: 50px;
  fill: red;
}

.common_selector:checked + label svg {
  fill: green;
}

<form name="myform">

<input type="radio" id="spot1" name="spot" class="common_selector spot_id" value="spot1">
<label for="spot1">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50"/>
  </svg>
</label>

<input type="radio" id="spot2" name="spot" class="common_selector spot_id" value="spot2">
<label for="spot2">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50"/>
  </svg>
</label>

<input type="radio" id="spot3" name="spot" class="common_selector spot_id" value="spot3">
<label for="spot3">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50"/>
  </svg>
</label>

</form>

3

Paul LeBeau 3 Май 2019 в 19:22

Answer 2

<input> не является допустимым элементом SVG - это элемент HTML, поэтому это не сработает. Вы также можете:

оберните входной элемент внутри элемента <foreignObject> и сделайте это таким образом, или
Вы можете использовать позиционирование, чтобы поместить элемент ввода поверх круга. Но справедливое предупреждение - элементы формы не всегда играют хорошо, когда они расположены над другими типами элементов. Или
Вы можете вручную нарисовать SVG, который выглядит как элемент ввода, и использовать JavaScript, чтобы он вел себя как единое целое. или
Поскольку вам просто нужен круг, почему бы не обернуть входной элемент в элементе Div с соответствующим радиусом границы и сделать круг таким образом.

2

Michael Mullany 3 Май 2019 в 02:20

Answer 3

Я надеюсь, что понимаю ваш вопрос. Вы не можете изменить элемент svg на вход, однако вы можете попробовать имитировать его.

// selects all the circles with a class of radio
let inputs = document.querySelectorAll(".radio")
// for every circle
inputs.forEach(i =>{
  //when the circle is clicked
  i.addEventListener("click", ()=>{
   // remove the class checked from all the circles but the clicked one 
   inputs.forEach(j =>{if(i!==j)j.classList.remove("checked") })
   // toggle the class checked on the clicked one 
   i.classList.toggle("checked")
})
})

svg{border:1px solid}
.checked{fill:red}

<svg id="theSVG" viewBox="800 410 300 85" width="300">
<circle class="radio" opacity="0.5" cx="842" cy="451.814" r="25.582"  fill="#FFB60C"  stroke="#FFB60C" stroke-width="10" />   

  
<circle class="radio"  opacity="0.5" cx="950" cy="451.814" r="25.582"  fill="#FFB60C"  stroke="#FFB60C" stroke-width="10" />   
  
<circle class="radio"  opacity="0.5" cx="1050" cy="451.814" r="25.582"  fill="#FFB60C"  stroke="#FFB60C" stroke-width="10" /> 

</svg>

2

enxaneta 4 Май 2019 в 14:49

Answer 4

ЧАСТЬ 1 . Используйте <foreignObect> для отображения любого элемента HTML внутри SVG:

<foreignObject x="20" y="20" width="100" height="100">
   <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" 
   value="spot1">
</foreignObject>

Затем вы можете использовать css, чтобы скрыть стиль по умолчанию для этого поля ввода и расположить над ним кружок. Вы можете прочитать об этом здесь: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

ЧАСТЬ 2 . Используйте радио кнопки вместо флажков. Флажки позволяют более одного выбора. Радио кнопки, что вам нужно здесь. Прочитайте об этом здесь: https://www.w3schools.com/tags/att_input_type_radio.asp

1

Moosa Saadat 3 Май 2019 в 03:59

Новые вопросы

svg

Как превратить <круг> (это внутри svg) в флажок?

4 ответа

Похожие вопросы