使用单选按钮切换 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 </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup('Marble')"/><span>Marble </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup('Split Marble')"/><span>Split Marble </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

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

无论如何，这就是我的做法。

单击时，我们将要显示的 SVG id 数组传递给 showGroup()。在 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 </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup(['Marble'])"/><span>Marble </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup(['Split','Marble'])"/><span>Split Marble </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>

使用单选按钮切换 SVG

Toggle SVG With Radio Buttons

html

javascript

svg

toggle