SVG graph, with embedded javascript, I use getElementById () does not work correctly in IE11

Question

SVG graph, with embedded javascript, I use getElementById () does not work correctly in IE11

Navigation

#1 by (1 votes)

2

I want to modify or see some values when I focus on an element of an SVG drawing. This works correctly in Chrome and Firefox. But when using IE11, it does not work. What could be the cause? Are there some JS libraries that resolve these incompatibilities between browsers?

The HTML code on the page is:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <object type="image/svg+xml" data="Imagen/SVG-STO.svg" style="width: 175px; height: 258px"></object>
    </div>

    </asp:Content>

The SVG code is:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" id="hexMap" viewBox="18 281 175 259" width="175" height="259" xml:space="preserve" style="background-color: #EEEEEE;">
    <script type="text/javascript">
    <![CDATA[
    var objNames =  
    {
      "AA":{"name":"Hex A","value":"965787"},
      "BB":{"name":"Hex B","value":"48986"}
    };
     
    function m_over(hover_id) { 
      var objName = objNames[hover_id].name;
      var objValue = objNames[hover_id].value;
      document.getElementById("Nombre").innerHTML = objName;
      document.getElementById("Valor").innerHTML = objValue;
      document.getElementById(hover_id).setAttribute("fill-opacity","0.3");
    }
    function m_out(hover_id)   {
      document.getElementById(hover_id).setAttribute("fill-opacity", "1.0");
      console.log(hover_id);
      document.getElementById("Nombre").innerHTML = "";
      document.getElementById("Valor").innerHTML = "";
    }
     
    ]]>
    </script>
    <text id = "Nombre" x = "28.74" y = "301" font-family = "sans-serif" font-size = "10px" fill = "#FF00FF">Initial</text>
    <text id = "Valor" x = "28.74" y = "321" font-family = "sans-serif" font-size = "10px" fill = "#FF00FF">Value</text>             
    <path id="AA" style="stroke:#CCCCCC; stroke-width:1px; fill:#00A600;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,326l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>     
    <path id="BB" style="stroke:#CCCCCC; stroke-width:1px; fill:#19AF00;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,356l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>
</svg>

In Firefox and Chrome the image shown is:

In IE11 the values are missing:

javascript svg asp.net

asked by PabloB 03.09.2017 в 01:32

source

1 answer

Gettext does not translate into PHP web Correct format for links in W3C

score 1 · Accepted Answer

You have to take into account something important: although SVG looks like HTML because it has a similar notation, it really is not HTML.

In SVG there is no innerHTML , some browsers can interpret it correctly because they interpret the SVG inline as if it were HTML, but it really is not "right". The correct thing in SVG would be to use textContent .

Change the innerHTML to textContent to modify the text of the text and it works in IE:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" id="hexMap" viewBox="18 281 175 259" width="175" height="259" xml:space="preserve" style="background-color: #EEEEEE;">
    <script type="text/javascript">
    <![CDATA[
    var objNames =  
    {
      "AA":{"name":"Hex A","value":"965787"},
      "BB":{"name":"Hex B","value":"48986"}
    };
     
    function m_over(hover_id) { 
      var objName = objNames[hover_id].name;
      var objValue = objNames[hover_id].value;
      document.getElementById("Nombre").textContent = objName;
      document.getElementById("Valor").textContent = objValue;
      document.getElementById(hover_id).setAttribute("fill-opacity","0.3");
    }
    function m_out(hover_id)   {
      document.getElementById(hover_id).setAttribute("fill-opacity", "1.0");
      console.log(hover_id);
      document.getElementById("Nombre").textContent = "";
      document.getElementById("Valor").textContent = "";
    }
     
    ]]>
    </script>
    <text id = "Nombre" x = "28.74" y = "301" font-family = "sans-serif" font-size = "10px" fill = "#FF00FF">Initial</text>
    <text id = "Valor" x = "28.74" y = "321" font-family = "sans-serif" font-size = "10px" fill = "#FF00FF">Value</text>             
    <path id="AA" style="stroke:#CCCCCC; stroke-width:1px; fill:#00A600;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,326l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>     
    <path id="BB" style="stroke:#CCCCCC; stroke-width:1px; fill:#19AF00;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,356l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>
</svg>