svgイメージ内の異なる四角形の色をどのように変更するか？

Question

最初の投稿はこちら。私はこれに簡単な解決策があると確信していますが、私は本当にこれに苦労しています。

クリックするとsvg内の特定の矩形の色を更新しようとしています。指定した矩形の色を変更する際に問題が発生しています。 私は部屋の地図のイメージを持っています、個々の部屋をクリックすると部屋の色が変わります。

イラストレーターを使用してsvgイメージを生成しました。

HTML：

<xml version="1.0" encoding="utf-8" ?> 
     <!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
     <svg version="1.1" id="FloorPlan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
      viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve" onclick="javascript: changeColour();"> 
     <style type="text/css"> 
      .st0 { 
       fill: none; 
       stroke: #000000; 
       stroke-miterlimit: 10; 
      } 

      .st1 { 
       font-family: 'Myriad-Web'; 
      } 

      .st2 { 
       font-size: 19.1885px; 
      } 
     </style> 
     <rect x="98.5" y="153" class="st0" width="1170.5" height="308.6" /> 
     <rect id="Violet" x="99.2" y="182" class="st0" width="81.4" height="76.8"/> 
     <rect id="Cacoa" x="99.2" y="259.3" class="st0" width="81.4" height="76.8" /> 
     <rect id="Vine" x="99.2" y="336.1" class="st0" width="81.4" height="126.3" /> 
     <rect id="Olive" x="180.7" y="368.1" class="st0" width="81.4" height="94.3" /> 
     <rect id="Cotton" x="262.1" y="368.1" class="st0" width="144.9" height="94.3" /> 
     <rect id="RoseBay" x="407" y="368.1" class="st0" width="144.9" height="94.3" /> 
     <rect id="Clove" x="552" y="368.1" class="st0" width="81.4" height="94.3" /> 
     <rect id="Orchid" x="633.4" y="368.1" class="st0" width="81.4" height="94.3" /> 
     <rect id="Lotus" x="848.7" y="368.1" class="st0" width="81.4" height="94.3" /> 
     <rect id="Bamboo" x="848.7" y="273.7" class="st0" width="81.4" height="94.3" /> 
     <rect id="Spruce" x="1091.6" y="368.1" class="st0" width="81.4" height="94.3" /> 
     <rect id="Pecan" x="1091.6" y="273.7" class="st0" width="81.4" height="94.3" /> 
     <text transform="matrix(0.8632 0 0 1 21.0381 220.3613)" class="st1 st2">Violet (4)</text> 
     <text transform="matrix(0.8632 0 0 1 20.3779 297.5322)" class="st1 st2">Cacoa (4)</text> 
     <text transform="matrix(0.8632 0 0 1 21.0967 392.4932)" class="st1 st2">Vine (6)</text> 
     <text transform="matrix(0.8632 0 0 1 191.2188 502.4238)" class="st1 st2">Olive (4)</text> 
     <text transform="matrix(0.8632 0 0 1 288.6143 502.3027)" class="st1 st2">Cotton (10)</text> 
     <text transform="matrix(0.8632 0 0 1 430.7705 501.9131)" class="st1 st2">RoseBay (10)</text> 
     <text transform="matrix(0.8632 0 0 1 557.7559 501.6709)" class="st1 st2">Clove (4)</text> 
     <text transform="matrix(0.8632 0 0 1 647.6934 503.2031)" class="st1 st2">Orchid (4)</text> 
     <text transform="matrix(0.8632 0 0 1 776.0117 424.3525)" class="st1 st2">Lotus (6)</text> 
     <text transform="matrix(0.8632 0 0 1 747.0732 320.376)" class="st1 st2">Bamboo (6)</text> 
     <text transform="matrix(0.8632 0 0 1 1006.8291 424.0977)" class="st1 st2">Spruce (4)</text> 
     <text transform="matrix(0.8632 0 0 1 1011.3525 320.8867)" class="st1 st2">Pecan (4)</text> 
     </svg> 

はJavaScript：

<script type="text/javascript"> 
       function changeColour() {      
        var a = document.getElementById("FloorPlan");      
        var svgDoc = a.getElementsByTagName('rect'); 


        var svgItem = //notsure how to get the clicked rectangle here 

        svgItem.setAttribute("fill", "lime"); 
       } 
     </script>   

Answer 1

あなたは:active疑似クラスのスタイルを追加することにより、CSSでこれを行うことができます。

#r1:active { fill:#f00; } 
 
#r2:active { fill:#f80; } 
 
#r3:active { fill:#ee0; } 
 
#r4:active { fill:#3c0; } 
 
#r5:active { fill:#0bb; } 
 
#r6:active { fill:#07e; } 
 
#r7:active { fill:#00d; } 
 
#r8:active { fill:#60a; }

<svg width="400" height="200" viewBox="0 0 400 200"> 
 
    <g stroke="#000" stroke-width="4" style="fill:#999"> 
 
    <rect id="r1" x="10" y="10" width="80" height="80"/> 
 
    <rect id="r2" x="110" y="10" width="80" height="80"/> 
 
    <rect id="r3" x="210" y="10" width="80" height="80"/> 
 
    <rect id="r4" x="310" y="10" width="80" height="80"/> 
 
    <rect id="r5" x="10" y="110" width="80" height="80"/> 
 
    <rect id="r6" x="110" y="110" width="80" height="80"/> 
 
    <rect id="r7" x="210" y="110" width="80" height="80"/> 
 
    <rect id="r8" x="310" y="110" width="80" height="80"/> 
 
    </g> 
 
</svg>

ただし、これらのスタイルは、マウスボタンを押したままにすると適用されます。マウスボタンを放した後に色を残したい場合は、代わりに何らかの形式のスクリプトを使用する必要があります。これはjQueryの使用にそれを行う方法です：

$(function(){ 
 
    $('.map-item').click(function(){ 
 
    $('.map-item').attr('class','map-item'); 
 
    $(this).attr('class','chosen map-item'); 
 
    }); 
 
});

#r1.chosen { fill:#f00; } 
 
#r2.chosen { fill:#f80; } 
 
#r3.chosen { fill:#ee0; } 
 
#r4.chosen { fill:#3c0; } 
 
#r5.chosen { fill:#0bb; } 
 
#r6.chosen { fill:#07e; } 
 
#r7.chosen { fill:#00d; } 
 
#r8.chosen { fill:#60a; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="400" height="200" viewBox="0 0 400 200"> 
 
    <g stroke="#000" stroke-width="4" style="fill:#999"> 
 
    <rect class="map-item" id="r1" x="10" y="10" width="80" height="80"/> 
 
    <rect class="map-item" id="r2" x="110" y="10" width="80" height="80"/> 
 
    <rect class="map-item" id="r3" x="210" y="10" width="80" height="80"/> 
 
    <rect class="map-item" id="r4" x="310" y="10" width="80" height="80"/> 
 
    <rect class="map-item" id="r5" x="10" y="110" width="80" height="80"/> 
 
    <rect class="map-item" id="r6" x="110" y="110" width="80" height="80"/> 
 
    <rect class="map-item" id="r7" x="210" y="110" width="80" height="80"/> 
 
    <rect class="map-item" id="r8" x="310" y="110" width="80" height="80"/> 
 
    </g> 
 
</svg>

注：通常は、クラスの属性を変更するjQueryのaddClass()とremoveClass()機能を使用します。ただしthis doesn't work in the SVG namespaceなので、クラス属性をattr()で直接設定する必要があります。