Internet Explorer 在矩阵变换时扭曲 SVG 图像
Posted
技术标签:
【中文标题】Internet Explorer 在矩阵变换时扭曲 SVG 图像【英文标题】：Internet Explorer distorts SVG image upon matrix transformation 【发布时间】：2021-02-28 15:53:57 【问题描述】：我有一个由图像填充的 SVG 路径，但是，当我对 SVG 对象进行多次转换时，当图像在 Chrome 和 Firefox 上、Internet Explorer（和 Edge）上显示正常时，图像变得完全扭曲/像素化。
这是一个问题，因为我试图将它放入一个 .NET “WebBrowser”控件中，该控件使用 IE 作为基础（但这不是重点）
获取此代码：
<html><body>
<h1>Rotation Test</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 400" >
<g><defs>
<pattern patternTransform="matrix(0 -0.252762 1 0 -336.5 62.95)" id="f1330" overflow="visible" viewBox="0 0 62 131" patternUnits="userSpaceOnUse" tp="7"><image href="bitofballoon.png" /></pattern>
</defs></g>
<g id="A04133" type="shape"><g ><path transform="matrix(0.200745 0.54213 -2.44809 0.906509 379.75 72.25)" fill="url(#f1330)" d="M -336.5 62.95 L -336.5 -62.9 L 336.5 -62.9 L 336.5 62.95 L -336.5 62.95" /></g></g>
</svg>
</body>
</html>
（我尝试将其作为 jsfiddle 放入，但似乎不支持 IE）
此代码是由旨在将 Flash 转换为 HTML 5 的工具自动生成的，因此我希望不需要进行重大更改。 （为了发帖，我简化了）
无论如何，如果你在 Chrome 或 Firefox 中打开它，你会看到这个......
（我不太担心剪裁...）
但是如果你在 IE 中打开它看起来像这样
如您所见，与 Chrome 版本相比，该图像似乎是已扩展的分辨率非常低的图像。
为什么会发生这种情况，更重要的是，有什么办法可以解决吗？
【问题讨论】：
观察：您在组<g id="0:4:133" 中有一个流浪关闭 defs。 id也以数字开头
@enxaneta - 好的 - 我已经根据您的观察更新了代码，但问题仍然存在......
我尝试检查patternTransform的文档，我们可以看到IE浏览器的兼容性未知。这可能是问题的原因。此外，我还建议您尝试通过从 SVG 中删除高度和宽度来检查问题。这是一个helpful blog，可能会给你一些信息。
@Deepak-MSFT - 谢谢，知道这很有帮助。我最终将图像修改为更接近其起始方向，然后在patternTransform 中，使用translate 和scale 而不是matrix 使其尽可能接近我想要的外观，并留下<path transform...，让它进入我想要的方向。这似乎成功了。
@colmde，从您上次的评论看来，您已经解决了这个问题。感谢您分享问题的解决方案。我建议您将您的解决方案发布为该线程的答案，并在 48 小时后尝试将您自己的答案标记为该问题的答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解
【参考方案1】：
所以这是我的决心。您可以在代码中看到两种转换，都使用matrix。我相信这两者的结合是 IE 所苦苦挣扎的。
所以我的解决方案是取出一个。实际上，patternTransform 正在做的是逆时针旋转 90 度并进行一些拉伸和挤压。于是我用photoshop把图片翻过来，把patternTransform矩阵改成缩放/旋转。
<html><body>
<h1>Rotation Test</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 400" >
<g><defs>
<pattern id="f1330" overflow="visible" viewBox="0 0 62 131" patternTransform="scale(1, 0.253), translate(336.5, 249)" patternUnits="userSpaceOnUse" tp="7"><image xmlns:xlink="http://www.w3.org/1999/xlink" href="sideballoon.png" /></pattern>
</defs></g>
<g id="A04133" type="shape"><g ><path transform="matrix(0.200745 0.54213 -2.44809 0.906509 379.75 72.25)" fill="url(#f1330)" d="M -336.5 62.95 L -336.5 -62.9 L 336.5 -62.9 L 336.5 62.95 L -336.5 62.95 " /></g></g>
</svg>
</body></html>
因为图像已经移位，所以也必须翻译它
【讨论】：
以上是关于Internet Explorer 在矩阵变换时扭曲 SVG 图像的主要内容，如果未能解决你的问题，请参考以下文章
为啥即使在模拟 Internet Explorer 8 文档模式时，Internet Explorer 11 也不支持条件注释？
对于某些情况，如 Internet Explorer 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码，如何仅针对 Internet Explorer 10？
如何从 Internet Explorer 11 降级到 Internet Explorer 10？
为啥在安装Windows Internet Explorer 7的时候,提示"此操作系统不支持Windows Internet Explorer 7.