IE11打印SVG时元素显示不全，设置@media print的width无效怎么解决

IE11打印SVG内容截断问题可行解决方案 #

1. 修复打印媒体查询的兼容属性

IE11打印渲染逻辑和普通页面渲染差异极大，当前代码里的vh单位、zoom属性、百分比高度都会触发SVG裁剪bug，按如下修改打印规则：

@media print {
  * {
    /* 全局禁用打印时的溢出裁剪，避免父元素意外截断内容 */
    overflow: visible !important;
  }
  .tree-area {
    border: 1px solid black;
    height: auto;
    width: 100%;
  }
  svg {
    border: 1px solid black;
    /* 移除zoom属性，改用transform缩放，从左上角开始缩放避免内容偏移 */
    transform: scale(0.75);
    transform-origin: top left;
    /* 覆盖屏幕样式里的vh高度，vh在IE11打印环境解析异常 */
    min-height: unset !important;
    height: auto !important;
    width: 100% !important;
  }
}

2. 补全SVG的viewBox属性

动态生成SVG时，必须给根<svg>标签加上正确的viewBox属性，值为0 0 你的SVG实际总宽度 你的SVG实际总高度，IE11打印时需要靠viewBox识别完整内容范围，缺少该属性时只会渲染初始视口内的内容，超出部分直接隐藏。
示例：如果生成的SVG实际宽为1200px、高为800px，SVG标签要写成：

<svg viewBox="0 0 1200 800" 其他属性...>
  <!-- SVG内容 -->
</svg>

3. 可选JS兜底方案

如果修改CSS后仍然有截断，可在触发打印前手动给SVG设置固定宽高，打印完成后还原：

// 打印触发前执行
const svgEle = document.querySelector('.tree-area svg');
const originWidth = svgEle.getAttribute('width');
const originHeight = svgEle.getAttribute('height');
// 宽高替换为实际的SVG内容宽高
svgEle.setAttribute('width', '1200px');
svgEle.setAttribute('height', '800px');

// 监听打印完成事件还原属性
if (window.matchMedia) {
  const mediaQueryList = window.matchMedia('print');
  mediaQueryList.addListener(function(mql) {
    if (!mql.matches) {
      svgEle.setAttribute('width', originWidth);
      svgEle.setAttribute('height', originHeight);
    }
  });
}
window.print();

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