MSFT Edge 中的 SVG 有时会变得不可见或扭曲

Question

如果重要的话，我在 Angular 内部使用它，但出于某些未知原因，仅在 Edge 中使用。当我在屏幕上移动鼠标时，img 会扭曲并渲染其中的一部分失踪，或完全消失

想法？

<img class="my_image_class" src="img/My-Svg-ToRender.svg" ng-src="img/My-Svg-ToRender.svg">

这个元素的

关联CSS如下..我试过设置没有height和没有width，设置height和width .. 行为没有改变

img.my_image_class {
   width: 100%;
   -webkit-user-drag: none;
}

还有其他 parent CSS，但看起来只有 margins、borders、padding

编辑：

在 CSS 中，尽我所能关闭所有功能，我注意到 svg 将不会呈现，直到我将鼠标悬停在它上面。我没有看到任何可以修改 svg 的 CSS 和没有看到发生任何转换

Answer 1

我通过 Microsoft 的反馈门户发现了一些关于 SVG 的未解决问题；看起来最近的更新可能对 Edge 中的 SVG 显示产生了负面影响（例如，https://connect.microsoft.com/IE/feedback/details/2350665）。根据我对这个问题的了解，文本框似乎是一个常见的罪魁祸首。

我的网站将徽标显示为包含文本的 SVG，并且在 Edge 中呈现时没有问题。但是，在我从 Illustrator 导出 SVG 之前，我将所有文本转换为路径。我这样做的原因类似：我在 Safari 中遇到 SVG 文本显示问题。

当然，理想情况下，SVG 应该适用于所有浏览器。这个问题似乎在 Edge 的修复列表中。但与此同时，也许这个解决方法会有所帮助！干杯！

Answer 2

我的内联 svg 图像在悬停时消失了。我有以下样式： svg {宽度：100%；高度：60px；} 'width: 100%' 样式旨在在鼠标进入包含块元素时立即激活悬停样式。这在 svg 图像上导致了一些奇怪的行为。从顶部或底部的鼠标进入按预期运行，从左侧或右侧的鼠标进入导致 svg 消失。删除 'width' 样式，解决了问题。

MSFT Edge 中的 SVG 有时会变得不可见或扭曲

SVG in MSFT Edge sometimes goes invisible or distorts

css

microsoft-edge