0

first post here. I'm sure there's a simple solution to this but I'm really struggling on this one.

I'm trying to update the colour of specific rectangles within an svg when clicked, and I'm having issues changing the colour of the specified rectangle e.g. I have an image of a map of rooms, clicking on an individual room will change the colour of the room.

I generated the svg image using 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>
Daniel Whettam
  • 345
  • 1
  • 2
  • 9
  • Have you tried binding a click event to each rect? Something like $rect.click(function() { /* change color of $whateverItem */ }) – GMaiolo Jan 25 '17 at 18:02

1 Answers1

0

You can do this with CSS by adding styles for the :active pseudo class:

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

However, these styles are only applied while the mouse button is being held down. If you want the colours to stay behind after the mouse button has been released, you'll have to use some form of scripting instead. This is how you might do it using 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>

Note: Ordinarily you would use jQuery's addClass() and removeClass() functions to change the class attributes. However, this doesn't work in the SVG namespace, so you have to set the class attributes directly with attr().

Community
  • 1
  • 1
r3mainer
  • 23,981
  • 3
  • 51
  • 88