Как превратить <circle>(это внутри svg) в флажок? - PullRequest
Новая
       32

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

0 голосов
/ 03 мая 2019

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

ЧАСТЬ 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);
});

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

Ответы [ 4 ]

3 голосов
/ 03 мая 2019

Это можно сделать без 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>
2 голосов
/ 03 мая 2019

Надеюсь, я понимаю ваш вопрос.Вы не можете изменить элемент 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 голосов
/ 03 мая 2019

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

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

ЧАСТЬ 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

...