

# 現象

後述のサンプル 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**

[code]

    <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>
    
[/code]

**背景画像 (example.png)**  
[![背景画像](https://i.stack.imgur.com/r3pLo.png)](https://i.stack.imgur.com/r3pLo.png)

**印刷プレビューでは svg が表示されない**  
[![印刷プレビュー](https://i.stack.imgur.com/0iyLI.png)](https://i.stack.imgur.com/0iyLI.png)


CC BY-SA 4.0
2023-02-16T05:45:43.937
93867
2023-02-16T05:46:10.570
2023-02-16T05:46:10.570
56414
56414
question
html firefox svg 印刷
Firefox の印刷プレビューで svg が表示されません