Question

我在与SVG创建和操作相关的Internet Explorer（Edge？，无论哪个在Win7上）有问题。

在我正在处理的应用程序中，我们使用d3生成图形作为SVG。在Chrome和Firefox中，这些功能非常好，没有问题。但是，在Internet Explorer上，存在一个单一的问题，它会在非常随机的情况下困扰整个网站。

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

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

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

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

我已经读过人们在IE浏览器中消失的类似问题，但解决方案没有工作，并且（在微软支持网站上）销售代表关闭了门票并说了问题是固定的。我在这里看到的唯一类似问题恰恰相反（文字在点击时消失了），并且在近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);
}

所以看起来设置视图框的宽度和高度会使文本呈现混乱，但我无法找到任何调整svg大小的好方法。

在Internet Explorer中，SVG不会调整自身大小以填充包含它的div。如果未定义视图框，则将宽度和高度设置为百分比值时，它们不执行任何操作。如果定义了视图框，则只有高度值（以％为单位）调整SVG大小 - 但是对于视图框，除非高度和宽度是静态的（即使它们未定义），也会出现文本呈现问题。

Answer 1

我面临同样的问题。我通过为svg容器设置固定高度来找到一个工作，如下所示：

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

这对我有用

Answer 2

将高度放在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;
}

}

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

2 个答案: