css - 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 和 宽度.. 行为不会改变

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

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

编辑:

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

Answer 1

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

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

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