SVG仅在IE中覆盖整个画布

Question

I have an interactive image with area hotspots using this plugin . This is working correctly and works no problem in IE. However I have added my own SVG label overlays, which animate on hover, and work as desired in Chrome,Firefox, Safari,etc but IE 11 just shows a black screen.

Here is a JSFiddle .

I've tried updating the fill on the main rect to rgba(0,0,0,0) but this just makes the whole of the SVG transparent and doesn't show the labels in IE only.

<rect width="2508" height="1370" style="fill:rgba(0,0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />

Here is my code:

<section id="availability-map">
<img name="availability-map" src="https://i.imgur.com/FuwVLPz.jpg" usemap="#m_availability-map" border="0" width="100%">

    <map name="m_availability-map">
        <area shape="poly" coords="1359,534 1437,502 1490,595 1563,563 1603,631 1587,692 1427,750 1390,711 1390,626 1359,602" href="#" title="1330" data-type="labelType1" data-class="colDarkBlue" data-expanded="true">

        <area class="map-shape" shape="poly" coords="1227,664 1227,593 1301,561 1380,685 1380,750 1304,768" href="#" title="1320" data-type="labelType1" data-class="colDarkBlue">

        <area class="map-shape" shape="poly" coords="926,664 1082,610 1074,585 1156,561 1237,685 1237,758 1155,789 1126,731 974,789 926,724" href="#" title="1310" data-type="labelType1" data-class="colDarkBlue">

        <area class="map-shape" shape="poly" coords="608,416 714,450 739,502 780,514 832,502 863,561 863,606 792,642 682,605 619,511" href="#" title="1240" data-type="labelType1" data-class="colLightBlue">

        <area class="map-shape" shape="poly" coords="474,440 559,416 616,543 648,611 648,664 540,626 474,476" href="#" title="1230" data-type="labelType1" data-class="colLightBlue">

        <area class="map-shape" shape="poly" coords="335,447 413,427 490,592 497,655 447,723" href="#" title="1220" data-type="labelType1" data-class="colLightBlue">

        <area class="map-shape" shape="poly" coords="195,442 266,468 277,540 250,561 259,575 345,605 345,655 316,714 195,675 140,529" href="#" title="1210" data-type="labelType1" data-class="colLightBlue">

        <area class="map-shape" shape="poly" coords="264,1056 363,1034 424,1258 432,1311 335,1335" href="#" title="1650" data-type="labelType1" data-class="colDarkGreen">

        <area class="map-shape" shape="poly" coords="1708,723 1745,714 1763,742 1727,750" href="#" title="Floating Pavilion" data-type="labelType2" data-class="colBlack">

        <area class="map-shape" shape="poly" coords="692,732 824,685 874,789 783,832 709,832 692,739" href="#" title="The Bowl" data-type="labelType2" data-class="colBlack">

        <area class="map-shape" shape="poly" coords="1947,593 1919,675 1890,750 2053,789 2156,768 2192,675" href="#" title="1410" data-type="labelType1" data-class="colLightGreen">

        <area class="map-shape" shape="poly" coords="2069,798 2263,789 2282,868 2248,943 2053,950 2032,869" href="#" title="1420" data-type="labelType1" data-class="colLightGreen">

        <area class="map-shape" shape="poly" coords="2176,1034 2205,969 2421,905 2466,992 2435,1048 2221,1110" href="#" title="1430" data-type="labelType1" data-class="colLightGreen">
    </map>
  <svg viewBox="0 0 2508 1370">
    <rect width="2508" height="1370" style="fill:rgb(0,0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />

<!-- labelType1 prototype SVG -->

    <g id="labelType1" class="labelType1 hoverLabel" transform="translate(2276,1034)">
      <line x1="0" y1="0" x2="0" y2="-200" class="labelLine" />
      <g class="buildingLabel" style="opacity:0;">
        <rect class="background" x="-200" y="-275" width="359" height="106"/>
        <text class="foreground" x="-20" y="-204" text-anchor="middle">BUILDING</text>
        <animate attributeName="opacity" id="ani-labelType1-o-in" from="0" to="1" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
        <animateMotion id="ani-labelType1-x-in" from="0,0" to="-170,0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
        <animate attributeName="opacity" id="ani-labelType1-o-out" from="1" to="0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
        <animateMotion id="ani-labelType1-x-out" from="-170,0" to="0,0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
      </g>
      <g class="mainLabel">
        <rect class="background" x="-110" y="-275" width="220" height="106"/>
        <text class="foreground" x="0" y="-204" fill="white" text-anchor="middle">labelText</text>
        <animateMotion id="ani-labelType1-lx-in" from="0,0" to="100,0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
        <animateMotion id="ani-labelType1-lx-out" from="100,0" to="0,0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
      </g>
    </g>

<!-- End labelType1 protype -->

<!-- labelType2 prototype SVG -->

    <g id="labelType2" class="labelType2 hoverLabel" transform="translate(1276,1034)">
      <line x1="0" y1="0" x2="0" y2="-200" class="labelLine" />
      <g class="mainLabel">
        <rect class="background" x="-220" y="-275" width="440" height="68" />
        <text class="foreground" x="0" y="-226" text-anchor="middle">labelText</text>
        <animateMotion id="ani-labelType1-lx-in" from="0,0" to="100,0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
        <animateMotion id="ani-labelType1-lx-out" from="100,0" to="0,0" dur="0.3s" begin="indefinite" repeatCount="1" fill="freeze" />
      </g>
    </g>

<!-- End labelType1 protype -->

  </svg>
</section>


/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.7 - 2018-05-01
 *  Desc: Resize HTML imageMap to scaled image.
 *  Copyright: (c) 2018 David J. Bradshaw - dave@bradshaw.net
 *  License: MIT
 */

!function(){"use strict";function a(){function a(){function a(a,d){function e(a){var d=1===(f=1-f)?"width":"height";return c[d]+Math.floor(Number(a)*b[d])}var f=0;j[d].coords=a.split(",").map(e).join(",")}var b={width:l.width/l.naturalWidth,height:l.height/l.naturalHeight},c={width:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-top"),10)};k.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(m),m=setTimeout(a,250)}function d(){l.width===l.naturalWidth&&l.height===l.naturalHeight||a()}function e(){l.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof i._resize}function g(a){return document.querySelector('img[usemap="'+a+'"]')}function h(){j=i.getElementsByTagName("area"),k=Array.prototype.map.call(j,b),l=g("#"+i.name)||g(i.name),i._resize=a}var i=this,j=null,k=null,l=null,m=null;f()?i._resize():(h(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
//# sourceMappingURL=imageMapResizer.map

(function () {

  var lastExpanded = null;
  var lockedOpen = [];
  var lockActive = false;

  function showExpanded(id) {
    if (lastExpanded == id)
      return;

    if (lastExpanded) {
        if (!lockActive || lockedOpen[lastExpanded] != true) {
        if (document.getElementById("ani-"+lastExpanded+"-o-out")) {
          document.getElementById("ani-"+lastExpanded+"-o-out").beginElement();
        }
        if (document.getElementById("ani-"+lastExpanded+"-x-out")) {
          document.getElementById("ani-"+lastExpanded+"-x-out").beginElement();
        }
        if (document.getElementById("ani-"+lastExpanded+"-lx-out")) {
          document.getElementById("ani-"+lastExpanded+"-lx-out").beginElement();
        }
      }
    }

    lastExpanded = id;
    var elem = document.getElementById(id);
    if (elem == null)
        return;
    var par = elem.parentElement;
    par.removeChild(elem);
    par.appendChild(elem);

        if (!lockActive || !lockedOpen[id]) {
      if (document.getElementById("ani-"+id+"-o-in")) {
        document.getElementById("ani-"+id+"-o-in").beginElement();
      }
      if (document.getElementById("ani-"+id+"-x-in")) {
        document.getElementById("ani-"+id+"-x-in").beginElement();
      }
      if (document.getElementById("ani-"+id+"-lx-in")) {
        document.getElementById("ani-"+id+"-lx-in").beginElement();
      }
    }
  }

  function recursiveIdReplace(root, oldId, newId) {
    if (root.firstElementChild) {
        recursiveIdReplace(root.firstElementChild, oldId, newId);
    }
    if (root.nextElementSibling) {
        recursiveIdReplace(root.nextElementSibling, oldId, newId);
    }
    if (root.id.indexOf(oldId)>=0) {
        root.id = root.id.replace(oldId,newId);
    }
    if (root.innerHTML != null && root.innerHTML.indexOf("labelText")>=0) {
        root.innerHTML = root.innerHTML.replace("labelText",newId);
    }
  }

  function makeLabel(typeId, newId, offsetX, offsetY, cls, lockOpen) {
    var modelElem = document.getElementById(typeId);
    if (modelElem == null) {
        alert("No SVG element '"+typeId+"' found.");
      return;
    }
    var newElem = modelElem.cloneNode(true);

    var areaElem = document.querySelector('[title="'+newId+'"]');
    if (areaElem == null) {
        alert("No area with title '"+newId+"' found");
      return;
    }
    var coords = areaElem.coords.split(' ');
    var totalX = 0, totalY = 0;
    for(var i=0;i<coords.length;i++) {
        var parts = coords[i].split(',');
        totalX += parseInt(parts[0]);
      totalY += parseInt(parts[1]);
    }
    var avgX = totalX/coords.length;
    var avgY = totalY/coords.length;

    newElem.setAttribute("transform","translate("+Math.round(avgX+offsetX)+","+Math.round(avgY+offsetY)+")");
    newElem.setAttribute("id", newId);
    if (cls != null && cls.length>0) {
        newElem.classList.add(cls);
    }
    recursiveIdReplace(newElem.firstElementChild, typeId, newId);
    modelElem.parentNode.appendChild(newElem);
    if (lockOpen) {
        lockedOpen[newId]=true;
    }
  }

  // Copy the prototype into labels

    var areaElems = document.querySelectorAll('area');
    areaElems.forEach(function(a) {
            makeLabel(a.dataset.type, a.title, 0, 0, a.dataset.class, a.dataset.expanded);
    });

    Object.keys(lockedOpen).forEach(function(key, index) {
            showExpanded(key);
            }, lockedOpen);
    lockActive = true;

    $("map[name=m_availability-map] area").on('click', function () {
        showExpanded($(this).attr('title')); 
        });
    $("map[name=m_availability-map] area").on('mouseenter', function () {
        showExpanded($(this).attr('title')); 
        });
    $("map[name=m_availability-map] area").on('mouseleave', function () {
        showExpanded(""); 
        });
    $(".hoverLabel").on('click', function () {
            var lnk = document.querySelector('area[title="'+$(this).attr('id')+'"]').getAttribute("href");
            if (lnk != null && lnk.length>0) {
                window.location.href = lnk;
            }
        });

    $(".hoverLabel").on('mouseenter', function () {
        showExpanded($(this).attr('id')); 
        });
    $(".hoverLabel").on('mouseleave', function () {
        showExpanded(""); 
        });

        $('map').imageMapResize();
})();

Answer 1

Html: line 32: rgb(0,0,0,0) should be for rgba(0,0,0,0), rgb has only 3 arguments

javascript: You have stumbled upon IE's quirckiness. Line 109: NodeList does not have forEach, use $(areaElems).each(function(i,a) { /*your code* /}); instead. The same goes for Line 97, Node does not have a classList property, use $(newElem).addClass(cls) instead.

With those modifications at least it shows the labels.

Sadly I did not have more time to invest to see what else is wrong in IE, but I would advise to use jQuery instead of plain JS whenever IE is involved