2

Deseo modificar o ver algunos valores cuando me centro en un elemento de un dibujo SVG. Esto funciona correctamente en Chrome y Firefox. Pero cuando se utiliza IE11, no funciona. ¿Cuál podría ser la causa? ¿Hay algunas bibliotecas JS que resuelven estas incompatibilidades entre navegadores?

El código HTML en la página es:

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

El código SVG es:

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

En Firefox y Chrome la imagen que se muestra es:

Imagen con valores correcto

En IE11 faltan los valores:

introducir la descripción de la imagen aquí

1 respuesta 1

2

Tienes que tener en cuenta algo importante: aunque SVG parezca HTML porque tiene una notación parecida, realmente no es HTML.

En SVG no existe innerHTML, algunos navegadores pueden interpretarlo correctamente porque interpretan el SVG inline como si fuera HTML, pero realmente no es lo "adecuado". Lo correcto en SVG sería usar textContent.

Cambia los innerHTML por textContent para modificar el texto de los text y ya funciona en 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>

1
  • Alvaro, excelente tu respuesta, funciona Ok.
    – PabloB
    el 4 sep. 2017 a las 14:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.