SVG HTML 链接不在 IE 中显示，但在 Chrome 和 Firefox 中显示答案

【问题标题】：SVG HTML link not displaying in IE but displays in Chrome and FirefoxSVG HTML 链接不在 IE 中显示，但在 Chrome 和 Firefox 中显示
【发布时间】：2018-10-09 22:28:27
【问题描述】：

我在图表下方显示带有文本和链接的图表。所有代码都在 SVG 中。下面是我的 text 代码，下面是我的 html 代码。 text 显示在所有测试的浏览器（包括 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 链接：

        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 中。我需要更改哪些内容才能在 IE 中包含并显示 html 代码？

链接打开一个模态窗口：

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

【问题讨论】：

我认为 Chrome 和 Firefox 更能容忍您的 html 方法调用错误（他们可能会将其转换为 SVG）。为什么要调用 html 方法而不是使用 append 生成链接？
我将调用的方法添加到我的问题的末尾。它会打开一个模式窗口，其中显示数据中捕获的电气尖峰表。
你能发布一个有效的sn-p吗？

标签： html internet-explorer svg

【解决方案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;
}

【讨论】：