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

【问题标题】：how to change the colour of svg element when mouse is over svg?鼠标悬停在 svg 上时如何更改 svg 元素的颜色？
【发布时间】：2021-02-24 09:09:19
【问题描述】：

当用户的鼠标悬停在 svg 上时，我正在尝试使 svgs 的颜色（默认颜色与背景相同）更改为各自的颜色。但是，当我查看 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 函数之一中标记的建筑物上时会发生错误。

【问题讨论】：

    标签： javascript html svg


    【解决方案1】：

    你的函数中有一些错误的拼写错误，都是错误的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>

    【讨论】：

      【解决方案2】：

      最简单的解决方案可能是在样式表中使用: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。
      • 从底部数第三个椭圆元素中有一个引号 (")，不应该存在。

      【讨论】：

      • 啊好的非常感谢，效果也很酷，谢谢
      猜你喜欢
      • 2018-03-12
      • 2021-12-18
      • 1970-01-01
      • 1970-01-01
      • 2020-08-14
      • 2018-11-20
      • 1970-01-01
      • 2015-11-28
      • 2020-05-30
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode