내부 스크립트를 사용하는 SVG 라디오 버튼 로직

Question

SVG를 사용하여 라디오 버튼 컨트롤을 만들려고합니다. 하나의 라디오 버튼 만 선택하도록하고 싶습니다. 나는 그것의 크기를 미리 정의 된 크기 (11)의 inner-circle 요소로 설정함으로써 라디오 버튼을 "선택"하고있다. 아래는 내가 할 수 있어야한다고 생각하는 코드입니다. 컨트롤의 상태를 추적하기 위해 클래스를 사용하고 있습니다. 아래는 svg 파일의 예입니다. 주먹 버튼 코드를 누르면

<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="300" 
    height="400" 
    id="radio"> 
    <script type="application/ecmascript"><![CDATA[ 
     var innerCircleExpandedSize = 11; 
     function ResponseOptionClicked(evt) { 
      console.log('Response option clicked'); 
      // Remove circle in enabled element 
      var enabledElem = document.getElementsByClassName('enabled')[0]; 
      console.debug(enabledElem); 
      if (enabledElem != undefined) { 
       console.log('Removing a inner circle'); 
       enabledElem.getElementsByClassName('response-innercircle')[0].setAttribute('r', 0); 
       enabledElem.className.baseVal = enabledElem.className.baseVal.replace('enabled', 'disabled'); 
       console.log('Removed the inner circle'); 
      } 

      // Add circle in radio button 
      console.log('Adding a inner circle'); 
      evt.currentTarget.getElementsByClassName('response-innercircle')[0].setAttribute('r', innerCircleExpandedSize); 
      evt.currentTarget.className.baseVal = evt.currentTarget.className.baseVal.replace('disabled', 'enabled'); 
      console.log('Added the inner circle'); 
     } 
    ]]></script>  
    <g id="base"> 
      <g class="response-option disabled" transform="translate(50,150)" onclick="ResponseOptionClicked(evt)" fill="#ffffff"> 
       <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" /> 
       <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" /> 
       <text x="40" y="6.5" class="response-text" fill="blue" font-size="1.5em">Rarely</text> 
      </g> 
      <g class="response-option disabled" transform="translate(50,200)" onclick="ResponseOptionClicked(evt)" fill="#ffffff"> 
       <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" /> 
       <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" /> 
       <text x="40" y="6.5" class="response-text" fill="blue" font-size="1.5em">Sometimes</text> 
      </g> 
      <g class="response-option disabled" transform="translate(50,250)" onclick="ResponseOptionClicked(evt)" fill="#ffffff"> 
       <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" /> 
       <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" /> 
       <text x="40" y="6.5" class="response-text" fill="blue" font-size="1.5em">Often</text> 
      </g> 
      <g class="response-option disabled" transform="translate(50,300)" onclick="ResponseOptionClicked(evt)" fill="#ffffff"> 
       <circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" /> 
       <circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" /> 
       <text x="40" y="6.5" class="response-text" fill="blue" font-size="1.5em">Always</text> 
      </g> 
    </g> 
</svg> 

작동 예상하고 첫 번째 단추는 더 많은 버튼은이 기능을 갖는 다른 버튼 결과 원래의 버튼을 전환하려고 계속 누르면 그러나 후, 오프 토글로 사용할 수 있습니다. 나는 단순한 논리적 오류를 만들고있는 것 같지만 잠시 동안 그것을 성공없이 추적하려고 노력했다.

Answer 1

Firefox에서 사용해 보셨나요? 그것은 그 브라우저를 사용하여 나를 위해 작동하는 것 ....