Chrome通常在打印时不显示嵌入式SVG图像

Question

我有一个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中，即使屏幕视图正确，大多数图标也不会打印（并且不会在打印预览中显示）。这是一个屏幕截图，带有图标和几个缺少的图标突出显示：

任何想法可能有什么问题吗？

Answer 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>