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

Question

我在 Internet Explorer(Edge？以 Win7 上的哪个为准)中遇到与 SVG 创建和操作相关的问题。

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

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

示例 2:在另一个带有 SVG 维恩图的页面上，单击选择元素时文本元素停止呈现。他们不会通过点击 SVG 上的任何地方重新呈现，除了现在不可见的文本本身。

我会看看我是否可以展示视觉示例，但我无法创建 fiddle 或任何复制问题的东西。我最初认为这是因为我们在 SVG 中有动画，但禁用这些动画并使所有元素始终 100% 可见没有任何效果。

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

我已经阅读了人们遇到的关于 SVG 文本在 IE 中消失的类似问题，但解决方案无效，并且(在 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 的大小。

在 Internet Explorer 中，SVG 不会自行调整大小以填充包含它的 div。当宽度和高度设置为百分比值时，如果未定义 View 框，它们什么也不做。如果定义了 View 框，则只有高度值(以 % 表示)调整 SVG 的大小——但是对于 View 框，除非高度和宽度是静态的(即使它们未定义)，否则会出现文本呈现问题。

Answer 1

我遇到了同样的问题。我通过为 svg 容器设置固定高度找到了一个解决方法，如下所示:

<svg viewBox="200 100 900 500"  xml:space="preserve" width="79%" height="500">

这对我有用