Javascript SVG文本在IE中消失，直到我点击它

我在Internet Explorer Edge中遇到问题？Win7上与SVG创建和操作相关的

在我正在开发的应用程序中，我们使用d3生成图形作为SVG。在Chrome和Firefox中，它们工作得非常好，没有任何问题。然而，在Internet Explorer上，有一个单一的问题在非常随机的情况下困扰着整个站点

示例1：在一个包含SVG图形和屏幕上按钮元素的页面上，将鼠标悬停在按钮上会阻止文本元素呈现，直到单击SVG为止。将鼠标悬停在按钮上两次后，元素将不再返回。在整个过程中，它们都留在DOM中

示例2：在另一个带有SVG Venn图的页面上，单击select元素时，文本元素停止呈现。除了现在不可见的文本本身之外，它们不会通过单击SVG上的任何位置重新渲染

我会看看是否可以展示可视化的例子，但我不能创建一个小提琴或任何复制问题的东西。我最初认为这是因为SVG中有动画，但禁用这些动画并使所有元素始终100%可见并没有任何作用

如果我打开开发人员窗格并在页面上的任何元素上禁用任何CSS选项，问题就会消失，这让我非常困惑

我读过人们在IE中遇到的SVG文本消失的类似问题，但解决方案不起作用，在Microsoft支持网站上，代表们已经关闭了票据，并表示问题已经解决。我在这里看到的唯一一个类似的问题是，当点击时，完全相反的文本消失了，并且在近3年内没有任何回复

如果有人有过类似的经历，并且知道如何防止这种情况发生，请发送帮助

var bbox, width, height, x=0, y=0, coordinates=scope.coordinates;

if (this.viewBoxWidth > 0)
{
    width = this.viewBoxWidth;
    height = this.viewBoxHeight; // assumed to also be defined
}
else
{
    bbox = scope.container.node().getBBox();
    width = bbox.width;
    height = bbox.height;
}

if (width > 0)
{
    if (coordinates)
    {
        x = coordinates.x; y = coordinates.y;
    }
    scope.svg.attr('viewBox', '' + x + ' ' + y + ' ' + width + ' ' + height);
}

因此，设置viewbox的宽度和高度似乎会影响文本渲染，但我找不到调整svg大小的好办法

---

在InternetExplorer中，SVG不会调整自身大小以填充包含它的div。当“宽度”和“高度”设置为“百分比”值时，如果未定义viewbox，则它们不会执行任何操作。如果定义了viewbox，则只有高度值为%会调整SVG的大小，但是如果使用viewbox，除非高度和宽度是静态的，即使它们没有定义，否则会出现文本呈现问题。

我也面临同样的问题。我通过如下设置svg容器的固定高度找到了一个作品：

---

将高度放在css中，这样就可以将IE和其他浏览器的样式区分开来。在IE11中为我修复了它

/* for normal working browsers */    
svg {
  height: 80%;
}

/* for IE10+ */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
svg {
  /* IE needs a fixed height */
  height: 225px !important;
}

---

}

一个代码示例将有助于和/或一些上下文代码，因此我们可以在IE中测试这一点。事实上，我现在可以提供帮助，因为我发现了问题的根源，尽管我不知道如何修复它。SVG创建本身很好，但是有代码可以调整其大小以适合其容器。删除调整大小代码可防止文本呈现问题。我将在中编辑它。我的另一个发现是，将“宽度”和“高度”属性设置为等于viewBox的静态值可以使其随页面的大小减小，而不会出现文本呈现问题。只有当高度基于百分比时，问题才会出现。然而，我真的希望它能按比例调整，而不是静止的高度。@jake，你能解决这个问题吗？在我的电脑上缩放图表也毁了它。那么，即使您设置了viewBox，但根本不包括宽度和高度，问题也会发生吗？这难道不会破坏SVG的响应特性吗？