SVG Text disappears in IE until I click on it

I am having an issue in Internet Explorer (Edge? whichever is on Win7) related to SVG creation and manipulation.

In the application I'm working on, we're using d3 to generate graphs as SVGs. In Chrome and Firefox, these work perfectly fine and have no issues. On Internet Explorer, however, there is a singular issue which plagues the entire site in very random situations.

Example 1: On one page with an SVG graph and an on-screen button element, hovering over the button stops text elements from rendering until the SVG is clicked on. After hovering over the button twice, the elements never return again. This entire time they remain in the DOM.

Example 2: On another page with an SVG Venn Diagram, text elements stop rendering when a select element is clicked on. They will not re-render from clicking anywhere on the SVG except the now-invisible text itself.

I'll see if I can show visual examples, but I can't create a fiddle or anything that replicates the issue. I initially assumed it was because of animations we have in the SVG, but disabling those and making all elements 100% visible all the time does nothing.

If I have the developer pane open and disable any CSS option on any element on the page, the problem disappears, which is very confusing to me.

I've read up on similar issues people have been having with SVG text disappearing in IE, but the solutions didn't work and (on the Microsoft support site) reps have closed the tickets and said the issues were fixed. The only similar issue I saw here was the exact opposite (text disappears when it's clicked on) and hasn't had any responses in almost 3 years.

If anyone has had a similar experience and any idea how to prevent this from happening, send help

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

So it seems that setting the width and height of the viewbox messes with text rendering but I can't find any good workarounds for resizing the svg.

In Internet Explorer, the SVG does not size itself to fill the div that contains it. When width and height are set to percentage values they do nothing, if the viewbox is not defined. If the viewbox is defined, only the height value (as %) sizes the SVG -- but with a viewbox, unless the height and width are static (even if they are left undefined), the text rendering issue appears.

回答1:

I'm facing the same problem. I found a work arround by setting a fixed height for the svg container as following:

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

This worked for me

回答2:

Put the height in your css, this way you can seperate your styling for IE and other browsers. Fixed it for me in 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;
}

}