0

現象

後述のサンプル HTML について Firefox(v110.0) で印刷プレビューを表示すると、以下の問題が発生しました。

  • 画像の上に配置している四角形の svg が表示されません。

試したこと

  • DIV を IMG タグに変えると、正常に svg が表示されました。
    • ただし、諸事情あって IMG タグには変更できません。
  • 親の DIV から transform: translate(0); を消すと、正常に svg が表示されました。

知りたいこと

  • svg が表示されない理由を知りたいです。
    • transform: translate(0); が怪しい気がするけど、理由がわからないので教えていただきたいです。
    • transform を削除すると、Chrome/Safari/Firefoxそれぞれの印刷プレビュー結果(svg の位置や大きさ)がバラバラになりました。
  • 「img にする」、「transform をやめる」以外の解決方法を知りたいです。

サンプル HTML

<html lang="ja">
<body>
<div style="width: 500px; height: 1500px; transform: translate(0);">
    <div style="background-image: url(example.png); background-size: contain; background-repeat: no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; width: 500px; height: 1500px;"></div>
    <svg viewBox="0 0 500 1500" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle; position: absolute; top: 0; left: 0;">
        <rect x="40" y="680" width="420" height="140" stroke="#ff0000" fill="transparent"></rect>
    </svg>
</div>
</body>
</html>

背景画像 (example.png)
背景画像

印刷プレビューでは svg が表示されない
印刷プレビュー

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。