SVG HTML link not displaying in IE but displays in Chrome and Firefox

Question

I am displaying a graph with text and links below the graph. All the code is in SVG. Below is my text code and below that is my html code. The text displays in all tested browsers (including IE) The hmtl code displays fine in Chrome and Firefox but not in IE.

TEXT:

    svg.append("text")
        .attr("class", "spikes")
        .attr("transform", "translate(" + (margin.left) + "," + (totalHeight + labelMargin * 3) + ")")
        .style("font-size", "1.2em")
        .style("font-weight", "bold")
        .style("text-anchor", "start")
        .text("Total SF Represented: " + squareFt);

HTML LINK:

        var spikesLinkText = "Invalid Interval Usage Spikes Removed: " + numberOfSpikesTotal;
        svg.append("text")
            .attr("class", "spikes")
            .attr("transform", "translate(" + (margin.left + graphWidth) + "," + (totalHeight + labelMargin * 2) + ")")
            .style("font-size", "1.2em")
            .style("font-weight", "bold")
            .style("text-anchor", "end")
            .html("<a href='#'>" + spikesLinkText + "</a>")
            .on("click", function (d) {
                onClickNumberSpikes();
            });

Screen Captures:

Report ran in Chrome or Firefox:

Report ran in IE:

Also, when I inspect the source in IE this links are not there. But they are there in Chrome and Firefox. What do I need to change to make the html code be included and display in IE?

The link opens a modal window:

onClickNumberSpikes = function () {
    $('#numberOfSpikesModal').foundation('reveal', 'open');
    initNumberOfSpikesTable(stateMap.hierarchyId);
}

Answer 1

Ended up changing the link to text and adding a style in the .css file to make the text look like a link on hover.

.SVG

        svg.append("text")
            .attr("class", "spikes plink")
            .attr("transform", "translate(" + (margin.left + graphWidth) + "," + (totalHeight + labelMargin * 2) + ")")
            .style("font-size", "1.2em")
            .style("font-weight", "bold")
            .style("text-anchor", "end")
            .text("Invalid Interval Usage Spikes Removed: " + numberOfSpikesTotal)
            .on("click", function (d) {
                onClickNumberSpikes();
            });

.CSS

.plink:hover {
    text-decoration: underline;
    cursor: pointer;
}