SVG文本在IE中消失，直到我点击它 [英] SVG Text disappears in IE until I click on it
问题描述
我在与SVG创建和操作相关的Internet Explorer（Edge中哪个是Win7）中遇到问题。
I am having an issue in Internet Explorer (Edge? whichever is on Win7) related to SVG creation and manipulation.
在我正在处理的应用程序中，我们使用d3生成图形作为SVG。在Chrome和Firefox中，这些工作完美无缺，没有任何问题。但是，在Internet Explorer上，存在一个单一的问题，它会在非常随机的情况下困扰整个网站。
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.
示例1：在一个带有SVG图和一个on-的页面上屏幕按钮元素，将鼠标悬停在按钮上会停止渲染文本元素，直到单击SVG。将鼠标悬停在按钮上两次后，元素永远不会再次返回。这整个时间它们都保留在DOM中。
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.
示例2：在另一个带有SVG维恩图的页面上，单击选择元素时文本元素会停止渲染。他们不会通过点击SVG上的任何地方重新渲染，除了现在不可见的文本本身。
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.
我会看看我是否可以展示视觉示例，但我可以'创造一个小提琴或任何复制问题的东西。我最初认为这是因为我们在SVG中有动画，但禁用它们并使所有元素始终100％可见。
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.
如果我有开发人员窗格打开并禁用页面上任何元素的任何CSS选项，问题消失，这对我来说非常混乱。
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.
我已经读过类似的问题随着SVG文本在IE中消失，但解决方案不起作用（在Microsoft支持网站上）销售代表已经关闭了门票，并说问题已得到解决。我在这里看到的唯一类似问题恰恰相反（文字在点击时消失）并且在近3年内没有任何回复。
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);
}
所以看起来设置视框的宽度和高度会混淆文本渲染但我无法找到任何调整svg大小的好方法。
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.
在Internet Explorer中，SVG不会调整自身大小以填充包含它的div。如果未定义视图框，则将宽度和高度设置为百分比值时，它们不执行任何操作。如果定义了视图框，则只有高度值（以％为单位）调整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.
推荐答案
我面临同样的问题。我通过为svg容器设置固定高度来找到一个工作，如下所示：
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">
这对我有用
这篇关于SVG文本在IE中消失，直到我点击它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
