当鼠标在 svg 上方时如何更改 svg 元素的颜色？

Question

I am trying to make the colour of the svgs (with default colour the same as the background) to change to their respective colour when the user's mouse is over the svg. However I am getting an error when I look at the FireFox console, I don't understand why this error is occurring.

When you run the code, just hover around the svg and the error will popup.

Here is my svg and code:

 "use strict"; // event-driven mouse-interaction with SVG objects function hoverExtraBuilding(){ let elem = document.getElementById("extra_building"); elem.setAttributeNS(null, 'fill', '#39baed'); } function hoverExtraBuilding1(){ let elem = document.getElementById("extra_building1"); elem.setAttributeNS(null, 'fill', '#ea8f3a'); } function hoverExtraBuilding2(){ let elem = document.getElementById("extra_building2"); elem.setAttributeNS(null, 'fill', '#39baed'); } function hoverExtraBuilding3(){ let elem = document.getElementById("extra_building3"); elem.setAttributeNS(null, 'fill', '#ea8f3a'); } function hoverExtraBuilding4(){ let elem = document.getElementById("extra_building4"); elem.setAttributeNS(null, 'fill', '#5e2b7e'); } function hoverExtraBuilding5(){ let elem = document.getElementById("extra_building5"); elem.setAttributeNS(null, 'fill', '#5e2b7e'); } // find the SVG rectangle in the DOM let extra_building = document.getElementById('extraBuidling'); let extra_building1 = document.getElementById('extraBuidling1'); let extra_building2 = document.getElementById('extraBuidling2'); let extra_building3 = document.getElementById('extraBuidling3'); let extra_building4 = document.getElementById('extraBuidling4'); let extra_building5 = document.getElementById('extraBuidling5'); // pass the above functions as callbacks, to be triggered by mouse events extra_building.addEventListener('mouseover', hoverExtraBuilding, false); extra_building1.addEventListener('mouseover', hoverExtraBuilding1, false); extra_building2.addEventListener('mouseover', hoverExtraBuilding2, false); extra_building3.addEventListener('mouseover', hoverExtraBuilding3, false); extra_building4.addEventListener('mouseover', hoverExtraBuilding4, false); extra_building5.addEventListener('mouseover', hoverExtraBuilding5, false);

 <svg width="645" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <:-- Created with SVG-edit - https.//github.com/SVG-Edit/svgedit--> <g class="layer"> <title>map</title> <rect fill="#9feddb" height="480" id="svg_1" width="650"/> <path id="extraBuidling" d="m293,08333.284,58877l0.-22.85543l-162,41667,0l0.139.10001l42,99265.0l-0,25.-116.17696l119,67402.-0.06762z" fill="#9feddb" transform="matrix(1 0 0 1 0 0)"/> <path id="extraBuidling1" d="m135,25889.85,50123c0.0.25389 105,99111.0.50655 105,99111.0,50655c0,0 0.103,33194 0.103,58708c0.0.25514 -41,99171.0.25514 -41,99171.0,25514c0,0 0.-37,50567 0.-37,50567c0.0 -64,75829.-0.25514 -64,75829.-0,25514c0.0 0,75889.-66.84185 0,75889.-66.58796z" fill="#9feddb"/> <rect fill="#9feddb" height="71.33333" id="extraBuidling2" width="66" x="34.66667" y="328"/> <rect fill="#9feddb" height="59.6" id="extraBuidling3" width="55.2" x="234.4" y="184"/> <path d="m239,41174.257.50001l-133,52938.-0.14706l-0,40001.-72.65294l49,1353.-0.00001l-16,57647.-30.81765l61,22353,0l0.32.14706l39,70588.0l0,44115.71.4706z" fill="#1bd1a6" id="godward_sqaure" stroke="#1bd1a6" stroke-width="5"/> <path id="extraBuidling4" d="m362,00001.208l142,39865.-0,66667l0.-16.66666l124,93467,0l0.-52l-126,27805.35.33333l-141,05527.0,66667l0.33,33333z" fill="#9feddb" /> <path d="m38.86,66667l0.94l64,66666.0l0,00001.-28l8,66666,0l0.27.33333l35,33334.0l-11,33334.-20l-12,66666.0l-0,00001,-8c8.0 12,66667.0 12,66667,0c0.0 -0,66667.-65,33333 0.-65.33333c0,66667.0 -89,33333.0 -97,33333,0z" fill="rgb(94,43.126)" id="computer_science" stroke="#000000" stroke-width="5"/> <rect fill="#10a3a3" height="447.44527" id="bandcroft_road" stroke="#10a3a3" stroke-width="5" width="35.76642" x="308.90512" y="-24.52553"/> <path id="extraBuidling5" d="m289,76366.183.9l-49,78947.0l-0,47419.-98.67391l127,08171.-0.50602l-0,47419.-52.12006l28,45113.0,50602l0.65.27659l34,14135.0l-0,47419.30.3612l-45,52181.0.50602l-16,59649.-20.24081l-0,47419.-9.61438l-75,86968,0l0.84,50535l0.0.00001l0,00002.-0.00001z" fill="#9feddb"/> <rect fill="#10a3a3" height="54.74453" id="mile_end_road" stroke="#10a3a3" stroke-width="5" width="647.44528" x="-1.31387" y="425,10952"/> <rect fill="rgb(94,43.126)" height="100.5" id="itl" stroke="#000000" stroke-width="5" transform="matrix(1 0 0 1 0 0)" width="65" x="37" y="192"/> <path d="m174,99947.274.5c-0,33149.41.16667 0,33149.82,83333 0.124l290,39161,0l0.-11.5l69,13833,0l0.-37l-68,64108,0l0.-142.5l-101,93541,0l0.167.5l-73,09515,0l0.-101l-115,8583.0,5z" fill="rgb(94,43.126)" id="engineering" stroke="#000000" stroke-width="5"/> <path d="m534,99996.206.02942l70,14708.-0,14707c0.0 0,44116.35.44119 -0,29414.34.70589c-0,73529.-0.73529 33,08824.0 32,64708.-0.14707c-0,44115.-0.14707 0,44116.39,85296 0.39.70588c-0,44115.-0.14707 -18,67649.0.14708 -19,11764.0c-0,44116.-0.14707 0,44115.116,32355 0.116.17647c-0,44116.-0.14707 -82,64709.0.88237 -83,08824.0.7353c-0,44115.-0.14708 -0,29414.-191.7647 -0,29414.-191,0294z" fill="rgb(94,43.126)" id="people_palace" stroke="#000000" stroke-width="5"/> <image id="building_image_id" x="355" y="50" width="280" height="110" href=""/> <style>:small {font-weight; lighter.}:smaller {font-weight; lighter: font-size. 0;6em.}:white {font-weight; bold: fill; white: font-size. 0;63em,} </style> <text id="mile_end_text" x="280" y="455" class="small">Mile End Road</text> <text x="280" y="240" text-anchor="middle" dominant-baseline="central" transform="rotate(90, 350. 215)" class="small">Bandcroft Road</text> <text id="6_id" text-anchor="middle" x="85" y="135" class="white">6</text> <text id="5_id" text-anchor="middle" x="70" y="250" class="white">5</text> <text id="15_id" text-anchor="middle" x="230" y="340" class="white">15</text> <text id="15.1_id" text-anchor="middle" x="415" y="310" class="white">15</text> <text id="16_id" text-anchor="middle" x="575" y="310" class="white">16</text> <text id="godward_id" text-anchor="middle" x="170" y="220" class="white"></text> </g> <g> <ellipse id="stepney_red" cx="80" cy="450" fill="#10a3a3" rx="20" ry="20" stroke-width="5"/> <ellipse id="stepney_grey" cx="80" cy="450" fill="#10a3a3" " rx="13" ry="13" stroke="10a3a3" stroke-width="5"/> <rect id="stepney_blue" height="4" stroke="#10a3a3" stroke-width="5" width="50" x="56" y="449"/> <text id="stepney_text" x="110" y="454" class="smaller"></text> <ellipse id="mile_red" cx="570" cy="450" fill="#10a3a3" rx="20" ry="20" stroke-width="5"/> <ellipse id="mile_grey" cx="570" cy="450" fill="#10a3a3" rx="13" ry="13" stroke="10a3a3" stroke-width="5"/> <rect id="mile_blue" height="4" stroke="#10a3a3" stroke-width="5" width="50" x="545" y="449"/> <text id="mile_text" x="435" y="454" class="smaller"></text> </g> </svg>

This is the error messagein the console:

Uncaught TypeError: elem is null

The error occurs when hovering over the building that is not marked in one of the hoverExtraBuildingX functions.

Answer 1

There is some wrong typo in your functions all wrong elementID, Should be: extraBuidling, extraBuidling1, ...

 "use strict"; // event-driven mouse-interaction with SVG objects function hoverExtraBuilding(){ let elem = document.getElementById("extraBuidling"); elem.setAttributeNS(null, 'fill', '#39baed'); } function hoverExtraBuilding1(){ let elem = document.getElementById("extraBuidling1"); elem.setAttributeNS(null, 'fill', '#ea8f3a'); } function hoverExtraBuilding2(){ let elem = document.getElementById("extraBuidling2"); elem.setAttributeNS(null, 'fill', '#39baed'); } function hoverExtraBuilding3(){ let elem = document.getElementById("extraBuidling3"); elem.setAttributeNS(null, 'fill', '#ea8f3a'); } function hoverExtraBuilding4(){ let elem = document.getElementById("extraBuidling4"); elem.setAttributeNS(null, 'fill', '#5e2b7e'); } function hoverExtraBuilding5(){ let elem = document.getElementById("extraBuidling5"); elem.setAttributeNS(null, 'fill', '#5e2b7e'); } // find the SVG rectangle in the DOM let extra_building = document.getElementById('extraBuidling'); let extra_building1 = document.getElementById('extraBuidling1'); let extra_building2 = document.getElementById('extraBuidling2'); let extra_building3 = document.getElementById('extraBuidling3'); let extra_building4 = document.getElementById('extraBuidling4'); let extra_building5 = document.getElementById('extraBuidling5'); // pass the above functions as callbacks, to be triggered by mouse events extra_building.addEventListener('mouseover', hoverExtraBuilding, false); extra_building1.addEventListener('mouseover', hoverExtraBuilding1, false); extra_building2.addEventListener('mouseover', hoverExtraBuilding2, false); extra_building3.addEventListener('mouseover', hoverExtraBuilding3, false); extra_building4.addEventListener('mouseover', hoverExtraBuilding4, false); extra_building5.addEventListener('mouseover', hoverExtraBuilding5, false);

 <svg width="645" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <:-- Created with SVG-edit - https.//github.com/SVG-Edit/svgedit--> <g class="layer"> <title>map</title> <rect fill="#9feddb" height="480" id="svg_1" width="650"/> <path id="extraBuidling" d="m293,08333.284,58877l0.-22.85543l-162,41667,0l0.139.10001l42,99265.0l-0,25.-116.17696l119,67402.-0.06762z" fill="#9feddb" transform="matrix(1 0 0 1 0 0)"/> <path id="extraBuidling1" d="m135,25889.85,50123c0.0.25389 105,99111.0.50655 105,99111.0,50655c0,0 0.103,33194 0.103,58708c0.0.25514 -41,99171.0.25514 -41,99171.0,25514c0,0 0.-37,50567 0.-37,50567c0.0 -64,75829.-0.25514 -64,75829.-0,25514c0.0 0,75889.-66.84185 0,75889.-66.58796z" fill="#9feddb"/> <rect fill="#9feddb" height="71.33333" id="extraBuidling2" width="66" x="34.66667" y="328"/> <rect fill="#9feddb" height="59.6" id="extraBuidling3" width="55.2" x="234.4" y="184"/> <path d="m239,41174.257.50001l-133,52938.-0.14706l-0,40001.-72.65294l49,1353.-0.00001l-16,57647.-30.81765l61,22353,0l0.32.14706l39,70588.0l0,44115.71.4706z" fill="#1bd1a6" id="godward_sqaure" stroke="#1bd1a6" stroke-width="5"/> <path id="extraBuidling4" d="m362,00001.208l142,39865.-0,66667l0.-16.66666l124,93467,0l0.-52l-126,27805.35.33333l-141,05527.0,66667l0.33,33333z" fill="#9feddb" /> <path d="m38.86,66667l0.94l64,66666.0l0,00001.-28l8,66666,0l0.27.33333l35,33334.0l-11,33334.-20l-12,66666.0l-0,00001,-8c8.0 12,66667.0 12,66667,0c0.0 -0,66667.-65,33333 0.-65.33333c0,66667.0 -89,33333.0 -97,33333,0z" fill="rgb(94,43.126)" id="computer_science" stroke="#000000" stroke-width="5"/> <rect fill="#10a3a3" height="447.44527" id="bandcroft_road" stroke="#10a3a3" stroke-width="5" width="35.76642" x="308.90512" y="-24.52553"/> <path id="extraBuidling5" d="m289,76366.183.9l-49,78947.0l-0,47419.-98.67391l127,08171.-0.50602l-0,47419.-52.12006l28,45113.0,50602l0.65.27659l34,14135.0l-0,47419.30.3612l-45,52181.0.50602l-16,59649.-20.24081l-0,47419.-9.61438l-75,86968,0l0.84,50535l0.0.00001l0,00002.-0.00001z" fill="#9feddb"/> <rect fill="#10a3a3" height="54.74453" id="mile_end_road" stroke="#10a3a3" stroke-width="5" width="647.44528" x="-1.31387" y="425,10952"/> <rect fill="rgb(94,43.126)" height="100.5" id="itl" stroke="#000000" stroke-width="5" transform="matrix(1 0 0 1 0 0)" width="65" x="37" y="192"/> <path d="m174,99947.274.5c-0,33149.41.16667 0,33149.82,83333 0.124l290,39161,0l0.-11.5l69,13833,0l0.-37l-68,64108,0l0.-142.5l-101,93541,0l0.167.5l-73,09515,0l0.-101l-115,8583.0,5z" fill="rgb(94,43.126)" id="engineering" stroke="#000000" stroke-width="5"/> <path d="m534,99996.206.02942l70,14708.-0,14707c0.0 0,44116.35.44119 -0,29414.34.70589c-0,73529.-0.73529 33,08824.0 32,64708.-0.14707c-0,44115.-0.14707 0,44116.39,85296 0.39.70588c-0,44115.-0.14707 -18,67649.0.14708 -19,11764.0c-0,44116.-0.14707 0,44115.116,32355 0.116.17647c-0,44116.-0.14707 -82,64709.0.88237 -83,08824.0.7353c-0,44115.-0.14708 -0,29414.-191.7647 -0,29414.-191,0294z" fill="rgb(94,43.126)" id="people_palace" stroke="#000000" stroke-width="5"/> <image id="building_image_id" x="355" y="50" width="280" height="110" href=""/> <style>:small {font-weight; lighter.}:smaller {font-weight; lighter: font-size. 0;6em.}:white {font-weight; bold: fill; white: font-size. 0;63em,} </style> <text id="mile_end_text" x="280" y="455" class="small">Mile End Road</text> <text x="280" y="240" text-anchor="middle" dominant-baseline="central" transform="rotate(90, 350. 215)" class="small">Bandcroft Road</text> <text id="6_id" text-anchor="middle" x="85" y="135" class="white">6</text> <text id="5_id" text-anchor="middle" x="70" y="250" class="white">5</text> <text id="15_id" text-anchor="middle" x="230" y="340" class="white">15</text> <text id="15.1_id" text-anchor="middle" x="415" y="310" class="white">15</text> <text id="16_id" text-anchor="middle" x="575" y="310" class="white">16</text> <text id="godward_id" text-anchor="middle" x="170" y="220" class="white"></text> </g> <g> <ellipse id="stepney_red" cx="80" cy="450" fill="#10a3a3" rx="20" ry="20" stroke-width="5"/> <ellipse id="stepney_grey" cx="80" cy="450" fill="#10a3a3" " rx="13" ry="13" stroke="10a3a3" stroke-width="5"/> <rect id="stepney_blue" height="4" stroke="#10a3a3" stroke-width="5" width="50" x="56" y="449"/> <text id="stepney_text" x="110" y="454" class="smaller"></text> <ellipse id="mile_red" cx="570" cy="450" fill="#10a3a3" rx="20" ry="20" stroke-width="5"/> <ellipse id="mile_grey" cx="570" cy="450" fill="#10a3a3" rx="13" ry="13" stroke="10a3a3" stroke-width="5"/> <rect id="mile_blue" height="4" stroke="#10a3a3" stroke-width="5" width="50" x="545" y="449"/> <text id="mile_text" x="435" y="454" class="smaller"></text> </g> </svg>

Answer 2

The easiest solution is probably to use the :hover selector in a style sheet. This way you can get rid of all those functions. Here is a very reduced example derived from your SVG. I even added a little color transition for extra eye candy.

 <svg width="645" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g class="layer"> <title>map</title> <rect fill="#9feddb" height="480" id="svg_1" width="650"/> <path id="extraBuidling" class="building" d="m293.08333,284.58877l0,-22.85543l-162.41667,0l0,139.10001l42.99265,0l-0.25,-116.17696l119.67402,-0.06762z" fill="#9feddb" transform="matrix(1 0 0 1 0 0)"/> <path id="extraBuidling1" class="building" d="m135.25889,85.50123c0,0.25389 105.99111,0.50655 105.99111,0.50655c0,0 0,103.33194 0,103.58708c0,0.25514 -41.99171,0.25514 -41.99171,0.25514c0,0 0,-37.50567 0,-37.50567c0,0 -64.75829,-0.25514 -64.75829,-0.25514c0,0 0.75889,-66.84185 0.75889,-66.58796z" fill="#9feddb"/> <style>.building { transition: fill 200ms; fill: purple; }.building:hover {fill: pink;} </style> </g> </svg>

Some additional notes to your code:

• You do not have to use setAttributeNS to set attributes on SVG elements. For all attributes except href and xlink you can simply use setAttribute .
• There is a quote symbol ( " ) in the third ellipse element from the bottom that should not be there.