仅设置id和class时SVG内IMG标签不生效及图片原尺寸配置问题

1. SVG内嵌main标签不显示图片的修复 #

核心原因：SVG使用独立的XML命名空间，默认仅识别SVG原生元素，直接嵌套main、img等HTML标签时，浏览器不会按HTML规则解析，因此内部内容无法渲染。
两种可选修复方案：

• 推荐方案（兼容性最优，叠层逻辑简单）：不修改main的位置，通过CSS定位将SVG叠加在图片容器上层，无需改动现有showImages()函数的逻辑。
  调整后的代码如下：

  <div class="gallery" style="position: relative;">
    <main id="image-gallery" class="images"></main> 
    <svg width="500" height="500" style="position: absolute; top: 0; left: 0;">
      <polygon id='x' style="stroke:#f00; fill:none;" /> 
    </svg>
  </div>
  

  父容器加position: relative作为定位锚点，SVG设绝对定位对齐左上角即可实现多边形覆盖在图片上层。如果需要图片可以响应点击等交互，给SVG加pointer-events: none样式即可。
• 强制内嵌方案（必须将main放入SVG内部时使用）：通过SVG的foreignObject标签包裹HTML内容，显式声明HTML命名空间：

  <svg width="500" height="500">
    <foreignObject width="100%" height="100%">
      <main xmlns="http://www.w3.org/1999/xhtml" id="image-gallery" class="images"></main>
    </foreignObject>
    <polygon id='x' style="stroke:#f00; fill:none;" /> 
  </svg>
  

  注意必须给内部HTML根节点加XHTML命名空间声明，同时给foreignObject设置匹配SVG的宽高，否则会出现渲染异常。

2. 图片原始尺寸无变形的配置方法 #

根据选择的渲染方案对应配置即可：

• 采用上述推荐的叠层方案时：
  • main内的img标签不要设置固定width/height属性，也不要添加width: 100%、object-fit: cover等强制缩放的CSS规则，默认即会按原始尺寸、比例渲染。
  • 分页切换图片时，通过JS读取当前图片的原生尺寸属性naturalWidth、naturalHeight，同步更新SVG的width、height属性，保证SVG尺寸和图片完全匹配，多边形坐标不会错位。
• 采用SVG原生image标签渲染图片时：
  • 将SVG和内部image标签的width、height都设置为图片的原始宽高，不修改preserveAspectRatio属性（默认值即可保持比例不拉伸），示例代码：

  <svg width="图片实际原生宽度" height="图片实际原生高度">
    <image href="图片路径" width="图片实际原生宽度" height="图片实际原生高度" />
    <polygon id='x' style="stroke:#f00; fill:none;" />
  </svg>
  

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