Chrome 在打印时通常不显示内联 SVG 图像答案

【问题标题】：Chrome usually not displaying inline SVG images when printingChrome 在打印时通常不显示内联 SVG 图像
【发布时间】：2018-09-11 22:10:16
【问题描述】：

我有一个web page，它在 HTML 中包含此代码的许多实例：

<span class="change-slide">@</span>

然后，页面使用 Javascript 将 @ 替换为 SVG 图像：

var changes = document.getElementsByClassName('change-slide');
for (var i=0; i<changes.length; i++) {
  changes[i].innerHTML = '<svg version="1.1" viewBox="0 0 16 16" height="16" width="16"><g transform="translate(0,-1036.3622)" id="layer1"><rect y="1036.8221" x="0.45993891" height="8.080122" width="15.080122" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:0.91987783;" /><g id="arrow-group"><path id="arrow" style="stroke-width:0" d="m 12.812155,1049.1511 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" /></g></g></svg>';
}

这是相关的 CSS：

.change-slide{font-weight:bold}
.change-slide svg{width:20px;height:20px;display:inline-block;vertical-align:middle}
@media screen{
  .change-slide svg path{fill:#900;stroke:#900}
  .change-slide svg rect{fill:#e2e2f8 !important;stroke:#4c0099 !important}
}

我估计在这个特定页面上大约进行了 50 次替换（带有指示何时更改幻灯片的口语脚本）。在 Firefox 和 Edge 中打印页面时，SVG 图标会按预期显示。但是，在 Chrome 中，尽管屏幕视图正确，但大多数图标都不会打印（并且不会显示在打印预览中）。这是一个屏幕截图，突出显示了图标和几个缺失的图标：

有什么想法可能是错的吗？

【问题讨论】：

标签： javascript html google-chrome svg printing

【解决方案1】：

一种可能性是 Chrome 无法正确解析 SVG 中的转换。我将变换应用于后代元素，所以它看起来是相同的 SVG，但不包含变换：

<svg version="1.1" viewBox="0 0 16 16" height="16" width="16">
  <g id="layer1">
    <rect y="0" x="0.45993891" height="8.080122" width="15.080122" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:0.91987783;" /><g id="arrow-group">
    <path id="arrow" style="stroke-width:0" d="m 12.812155,12.7889 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" />
    </g>
  </g>  
</svg>

也许用这个替换你的 svg 会有所帮助。

编辑：这是一个较小的修改版本，可能会解决 Firefox 上的新问题：

<svg version="1.1" viewBox="0 0 16 16" height="16" width="16">
  <g id="layer1">
    <rect y="0" x="0.5" height="8" width="15" id="screen" style="fill:#ffffff;stroke:#000000;stroke-width:1;" />    
    <g id="arrow-group">
    <path id="arrow" style="stroke-width:0" d="m 12.812155,12.7889 -2.523251,2.5233 -0.7704589,-0.7705 1.4959739,-1.496 -2.3691601,0 0,-1.0915 2.3691601,0 -1.4959739,-1.4959 0.7704589,-0.7705 2.523251,2.5233 0,0.5778 z m -6.8956031,-0.8347 1.6372242,0 0,1.0915 -1.6372242,0 0,-1.0915 z m -1.0914828,0 0,1.0915 -1.6372242,0 0,-1.0915 1.6372242,0 z" />
    </g>
  </g>  
</svg>

【讨论】：

这很奇怪。您的版本在 Chrome 中完美运行；然而，在 Firefox 中，顶部边框被切断了大约一半的时间——没有完全切断，但明显变薄了。我使用这个版本是因为 Chrome 比 Firefox 更受欢迎，而且它是一个较小的错误，但这很奇怪，特别是因为 Firefox 通常倾向于比 Chrome 更好地处理我的格式并且具有更好的 CSS 支持（至少对于我的 CSS）米使用）
Firefox 似乎在正确显示笔画宽度方面存在一些问题。每当我们创建 SVG 时，我们通常根本不使用描边，只使用填充。这通常会产生更可预测的结果。
感谢您的建议。我会调查的。