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:
En IE11 faltan los valores: