小贝子编程

鼠标在svg上时，如何更改svg元素的颜色



当用户的鼠标在svg上时，我正试图使svg的颜色(默认颜色与背景相同)更改为各自的颜色。然而，当我查看FireFox控制台时，我遇到了一个错误，我不明白为什么会出现这个错误。

当您运行代码时，只需将鼠标悬停在svg上，就会弹出错误。

这是我的svg和代码：

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

这是控制台中的错误消息：

Uncaught TypeError: elem is null

将鼠标悬停在某个hoverExtraBuildingX函数中未标记的建筑上时，会发生错误。

函数中有一些错误的拼写错误所有错误的elementID，应该是：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>

最简单的解决方案可能是在样式表中使用:hover选择器。这样你就可以去掉所有这些功能。下面是一个从SVG派生的非常精简的示例。我甚至添加了一点颜色过渡，以增加养眼效果。

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

代码的一些附加注释：

  • 您不必使用setAttributeNS来设置SVG元素的属性。对于除href和xlink之外的所有属性，您可以简单地使用setAttribute
  • 从底部开始的第三个椭圆元素中有一个引号(")，它不应该在那里

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium