Question

我在Angular中使用它，如果它很重要，但由于一些未知的原因只在Edge ..当我在屏幕上移动鼠标时，img会扭曲并渲染一些缺失，或者完全消失< / p>

想法？

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

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

编辑

将我可以关闭的所有东西都关闭，在CSS中，我注意到svg不会渲染UNTIL我将鼠标悬停在它上面..我没有看到任何可能修改svg的CSS并且看不到任何转换发生的指令

Answer 1

我通过微软的反馈门户网站发现了一些关于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;} 宽度：100％＆＃39;样式旨在一旦鼠标进入包含块元素就激活悬停样式。这导致了svg图像上的奇怪行为。从顶部或底部鼠标输入按预期运行，从左或右的鼠标输入导致svg消失。删除＆＃39;宽度＆＃39;造型，解决了问题。

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

2 个答案: