ラジオボタンでSVGを切り替えます

Question

こんにちは、私はグラフィックデザイナーです。私はSVG Graphicsを扱っています。このページでは、私はそれらをお互いのトップに置いておきたいと思います。どのボタンが押されたかは、ユーザーが見るものに依存します。ここにコードがあり、私はいくつかの余分な見通しを与えるためにワークフローを提供します。コードがぞっとするならば、事前にお詫びします。

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>

Visual Graph

Answer 1

まず第一に。 1つの大きな間違いは、あなたのSVGの中に<div>要素を持つことでした。 <div>は有効なSVG要素ではありません。

とにかく、私はそれをやっています。

クリックすると、に表示されているSVG idの配列が渡されます。 showGroup()では、最初に渡されたIDを持つすべてのものに戻って電源を入れ、すべてのSVGsを非表示にします。

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>