Chrome обычно не отображает встроенные изображения SVG при печати

Question

У меня есть веб-страница , которая содержит много экземпляров этого кода в 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>