Question

你好Stack Overflow社区，我是一名平面设计师，试图让我的代码得到满足。我正在处理我需要切换的SVG图形。在页面中，我希望它们彼此位于顶部，并且取决于按下哪个按钮是用户看到的按钮。这是代码，我将提供一个工作流程，以提供一些额外的视角。如果代码很可怕，我会提前道歉。

Visual Graph

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 1

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

无论如何，我在这里怎么做。

点击后，我们会向showGroup()传递我们想要显示的SVG id数组。在showGroup()中，我们首先隐藏所有SVG，然后使用已传入的ID返回所有SVG。

＆＃13;

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([]);

＆＃13;

<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>

＆＃13;

使用单选按钮切换SVG

1 个答案: