IE11及以下版本中SVG内部<image>标签缩放渲染问题求助

解决IE11及更低版本无法渲染内嵌的SVG问题 #

嘿，我碰到过好多次IE11对SVG的奇葩兼容问题了，你的情况主要是IE11对SVG <image> 标签的属性支持和语法要求比现代浏览器严格得多。咱们一步步来解决：

核心问题分析 #

IE11不支持SVG <image> 标签的href属性，它只认旧的xlink:href属性；另外，IE对SVG元素的闭合语法要求很严格，未正确闭合的标签会直接导致渲染失败。

具体解决方案 #

• 同时添加xlink:href和href属性：IE11只识别xlink:href来指定图片资源，现代浏览器则同时支持href和xlink:href，两个属性都加上既能兼容IE，又不影响现代浏览器的正常渲染。
• 确保标签正确闭合：IE对未闭合的SVG标签容错率极低，<image>标签要么写成自闭合形式<image ... />，要么明确加上闭合标签</image>。
• 保留xlink命名空间：你已经在<svg>标签里加了xmlns:xlink="http://www.w3.org/1999/xlink"，这步是对的，必须保留才能让xlink:href属性生效。

修正后的代码示例 #

svg { 
  height: auto; 
  width: 100%; 
}

<svg width="820" height="560" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 820 560">
  <title>A title</title>
  <image width="820" height="560" xlink:href="https://dummyimage.com/820x560" href="https://dummyimage.com/820x560" />
  <!-- 其他SVG元素放在这里 -->
</svg>

如果需要把<title>嵌套在<image>内（虽然更规范的写法是作为SVG的直接子元素），也可以这样写：

<svg width="820" height="560" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 820 560">
  <image width="820" height="560" xlink:href="https://dummyimage.com/820x560" href="https://dummyimage.com/820x560">
    <title>A title</title>
  </image>
  <!-- 其他SVG元素放在这里 -->
</svg>

额外注意事项 #

• 如果SVG里还有其他元素（比如路径、文本），要确保它们只使用SVG 1.1的特性，IE11完全不支持SVG 2的新语法。
• 测试时记得清空IE11的缓存，有时候旧缓存会让修改后的代码不生效。

内容的提问来源于stack exchange，提问作者chrona