javascript – SVG文本在IE中消失,直到我点击它

2023年1月26日 238次阅读

我在与SVG创建和操作相关的Internet Explorer(Edge？,无论哪个在Win7上)有问题.

在我正在研究的应用程序中,我们使用d3生成图形作为SVG.在Chrome和Firefox中,这些功能非常好,没有问题.然而,在Internet Explorer上,存在一个单一的问题,它在非常随机的情况下困扰整个站点.

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

示例2：在具有SVG维恩图的另一页上,文本元素在单击选择元素时停止渲染.除了现在不可见的文本本身之外,它们不会通过单击SVG上的任何位置来重新渲染.

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

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

我已经读过人们在IE中消失的SVG文本时遇到的类似问题,但解决方案无法正常工作,并且(在微软支持网站上)销售代表已经关闭了门票,并表示问题已得到解决.我在这里看到的唯一类似问题恰恰相反(文字在点击时消失)并且在近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大小 – 但是对于视图框,除非高度和宽度是静态的(即使它们未定义),也会出现文本呈现问题.

最佳答案 我面临着同样的问题.我通过为svg容器设置固定高度来找到一个工作,如下所示：

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

这对我有用

点赞