Question

我正在尝试使用SVG进行单选按钮控制。我希望一次只能选择一个单选按钮。我通过将其inner-circle元素的大小设置为预定义大小（11）来“选择”单选按钮。下面是我认为应该能够做到的代码。我正在使用类来跟踪控件的状态。下面是一个示例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中试过吗？它似乎适合我使用该浏览器....

使用内部脚本的SVG单选按钮逻辑

1 个答案: