Wie ändert man die Farbe von verschiedenen Rechtecken innerhalb eines SVG-Bildes, je nachdem, worauf geklickt wird?

Question

ersten Beitrag hier. Ich bin mir sicher, dass es eine einfache Lösung dafür gibt, aber ich habe wirklich Probleme damit.

Ich versuche, die Farbe bestimmter Rechtecke innerhalb einer SVG zu aktualisieren, wenn Sie darauf klicken, und ich habe Probleme, die Farbe des angegebenen Rechtecks ​​ z. Ich habe ein Bild von einer Karte von Räumen, klicken auf einen einzelnen Raum wird die Farbe des Raumes ändern.

Ich generierte das Svg-Bild mit Illustrator.

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

Sie können dies mit CSS tun Stile für die :active Pseudo-Klasse hinzufügen:

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

Diese Stile werden jedoch nur angewendet, während die Maustaste gedrückt gehalten wird. Wenn Sie möchten, dass die Farben nach dem Loslassen der Maustaste zurückbleiben, müssen Sie stattdessen eine Art von Skripten verwenden. Dies ist, wie Sie es mit jQuery tun könnte:

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

Hinweis: Normalerweise würden Sie jQuery addClass() und removeClass() Funktionen verwenden, um die Klassenattribute zu ändern. Wie auch immer, this doesn't work in the SVG namespace, also müssen Sie die Klassenattribute direkt mit attr() setzen.