javascript - 使用单选按钮切换 SVG

Question

大家好，Stack Overflow 社区，我是一名图形设计师，试图了解代码。我正在处理需要在之间切换的 SVG 图形。在页面中，我希望将它们放在一起，并且根据按下的按钮是用户看到的按钮。这是代码，我将提供一个工作流程来提供一些额外的视角。如果代码很丑陋，我提前道歉。

Visual Graph

function showGroup(group)
{
    $("#hideables").children('div.'+group).show();
    $("#hideables").children('div').not('.'+group).hide();
}

<div class="catProdAttributeItem"><input type="radio" id="34656268" name="5905984" mandatory="1" onclick="showGroup('Solid')"/><span>Solid </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34656273" name="5905984" mandatory="1" onclick="showGroup('Split')"/><span>Split $10</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup('Marble')"/><span>Marble $15</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup('Split Marble')"/><span>Split Marble $15</span></div>
                           </div>
                           
<div id="hideables">                          
<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Avian-Solid</title>
  
  <div class="Solid">
  <rect width="610" height="610" style="fill: blue";  class="basecolor"/>
  
  </div>
</svg>

<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Split</title>
  <div class="SplitSVG">
  <rect width="610" height="610" style="fill: green";  class="basecolor"/>
  </div>
</svg>

<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Marble</title>
  <div class="MarbleSVG">
  <rect width="610" height="610" style="fill: red";  class="basecolor"/>
  </div>
</svg>
</div>

Answer 1

首先。你犯的一个大错误是 <div> SVG 中的元素。 <div>不是有效的 SVG 元素。

无论如何，我会这样做。

点击后，我们传递到 showGroup() SVG id 的数组这是我们想要展示的。在 showGroup()我们首先隐藏所有 SVG，然后重新打开所有具有已传入 id 的 SVG。

function showGroup(groups)
{
    // Hide all SVGs
    $("#hideables svg").hide();

    // Now show just the ones we want
    $.each(groups, function(i, item) {
      $('#'+item).show();
    });
}


// Initialise the page by hiding all SVGs.
// (The empty array parameter results in none being shown)
showGroup([]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catProdAttributeItem"><input type="radio" id="34656268" name="5905984" mandatory="1" onclick="showGroup(['Solid'])"/><span>Solid </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34656273" name="5905984" mandatory="1" onclick="showGroup(['Split'])"/><span>Split $10</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup(['Marble'])"/><span>Marble $15</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup(['Split','Marble'])"/><span>Split Marble $15</span></div>
                           </div>
                           
<div id="hideables">                          
<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Avian-Solid</title>
  <rect width="610" height="610" style="fill: blue";  class="basecolor"/>
</svg>

<svg id="Split" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Split</title>
  <rect width="610" height="610" style="fill: green";  class="basecolor"/>
</svg>

<svg id="Marble" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Marble</title>
  <rect width="610" height="610" style="fill: red";  class="basecolor"/>
</svg>
</div>