css 伪 class 中的 SVG 并不总是出现在打印页面上

Question

我正在为印刷媒体创建一个样式表，其中包含一个内联 SVG 作为元素伪 class 的内容（即 ::before， ::after).

在 Chrome 中测试时，它似乎工作得很好，但是当页面首次在 Firefox 和 Safari 中加载时，SVG 元素不会出现在打印预览中。然后它会出现在所有后续尝试中。

我不太确定发生了什么，但如果我不得不猜测，我的猜想是：当页面没有被缓存时，有延迟呈现伪元素，同时浏览器创建打印页面。

我很好奇为什么会这样，以及是否有任何可以可靠地使用 SVG 伪元素的解决方案。

这是一个精简的代码示例。请查看您是否可以重现此问题：

var button = document.querySelector('button');
button.addEventListener('click', function () {
 window.print();
});

div {
    text-align: center;
}
button {
    margin: 2em;
    padding: 1em 2em;
}
@media print {
    button {
        display: none;
    }
    div::before {
        content: 'Pseudo-elements';
        font-weight: bold;
        margin-top: 1em;

    }
    div::after {
        position: relative;
        display: block;
        margin-top: 1em;
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
    }    
}

<div>
    <button>
     print
    </button>
</div>

Answer 1

我可以复制。

这似乎是加载 svg 的错误，我想它对任何图像都是一样的。

一种解决方法是使用 display: none 在 @print 规则之外加载它：

var button = document.querySelector('button');
button.addEventListener('click', function() {
  window.print();
});

div {
  text-align: center;
}
button {
  margin: 2em;
  padding: 1em 2em;
}
div::after {
  display: none;
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
@media print {
  button {
    display: none;
  }
  div::before {
    content: 'Pseudo-elements';
    font-weight: bold;
    margin-top: 1em;
  }
  div::after {
    opacity: 1;
    position: relative;
    display: block;
    margin-top: 1em;
  }
}

<div>
  <button>
    print
  </button>
</div>

另一种方法是事先通过 js 预加载它。

css 伪 class 中的 SVG 并不总是出现在打印页面上

SVG in css pseudo-class does not alway appear on print page

safari

firefox

svg

print-preview

pseudo-element