javascript - 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 中，尽管屏幕 View 是正确的，但大多数图标都没有打印出来(也没有出现在打印预览中)。这是一个屏幕截图，其中突出显示了图标和几个缺失的图标:

任何想法可能是错误的？

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>