HTML-ссылка SVG не отображается в IE, но отображается в Chrome и Firefox

Question

Я отображаю график с текстом и ссылками под графиком. Весь код в SVG. Ниже мой текст код, а ниже мой html код. текст отображается во всех протестированных браузерах (включая IE). Код hmtl отлично отображается в Chrome и Firefox, но не в IE.

Текст:

    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();
            });

Снимки экрана:

Отчет запускался в Chrome или Firefox:

Отчет запущен в IE:

Кроме того, когда я проверяю источник в IE, ссылки отсутствуют. Но они есть в Chrome и Firefox. Что мне нужно изменить, чтобы включить HTML-код и отображать в IE?

Ссылка открывает модальное окно:

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

Answer 1

Закончено изменение ссылки на текст и добавление стиля в файл .css, чтобы текст выглядел как ссылка при наведении курсора.

.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;
}