html - 打印预览中不显示 CSS 剪辑路径 : why?

Question

我有两个 div，每个都包含一个图像，我在上面放置了一个剪辑路径以 flex 图像的顶部，然后转换。这显示得很好。

当我打印页面时出现问题。 div 仍在正确的位置，但剪辑路径似乎已被否定。

我也试过从 div 中删除翻译，但这没有帮助。

预期:

https://i.imgur.com/oOtRIcK.png

实际:

https://i.imgur.com/IUPhXdD.png

任何人都可以为我阐明这个问题吗？我在网上或 stackoverflow 上没有找到任何东西。

有没有人对让我的剪辑路径在打印预览中显示有任何建议？我对不同的方法持开放态度。

提前致谢!

   <div id="houseViewer" style="background-image: url('/images/gallery/5.jpg\');">
<svg id="houseCanvas" version="1.1" style="overflow: hidden; position: relative; width: 986px; height: 739.5px; top: 1.25px; left: 0px;" viewBox="0, 0, 986, 739.5">
    <defs id="svgDefs">
        <clipPath id="svgPath0" class="svgPath">
            <path d="M0,15.268249511718807     Q161.72368421052633,-15.600171540912811 309.35526315789474,15.939302143297766 L310.69736842105266,146.12351266961355 L-1.3421052631578974,152.83403898540303 Z">
            </path>
        </clipPath>
        <clipPath id="svgPath1" class="svgPath">
            <path d="M0,14.435082686574901 Q73.81578947368422,-15.091233102898798 153.67105263157896,15.777187949732763 L154.34210526315792,144.61929321289068 L0.6710526315789593,149.31666163394334 Z">
            </path>
        </clipPath>
    </defs>
</svg>

<div class="doorImageDiv" id="outerDiv0" style="clip-path: url("#svgPath0"); position: absolute; left: 0px; top: 1px; transform-origin: left top; transform: translate(36.5724px, 322.607px);">
    <div id="clip0" class="doorImageDiv" style="position: absolute; width: 975px; transform-origin: left top; height: 980.268px; top: 0px; transform: matrix3d(0.331386, 0, 0, 4.7e-05, -0.001508, 0.154379, 0, -1e-05, 0, 0, 1, 0, 0.148959, 0, 0, 1);">
        <img src="https://mdmwus2storage.blob.core.windows.net/mdm-webportal-stage/doors/fa0f0641-73d9-e911-885d-5882a89b3e5b.png" style="width: 100%; height: 100%;">
    </div>
</div>
<div class="doorImageDiv" id="outerDiv1" style="clip-path: url("#svgPath1"); position: absolute; left: 0px; top: 1px; transform-origin: left top; transform: translate(424.441px, 320.756px);">
    <div id="clip1" class="doorImageDiv" style="position: absolute; width: 975px; transform-origin: left top; height: 979.435px; top: 0px; transform: matrix3d(0.162716, 0, 0, 3.3e-05, 0.000758, 0.152417, 0, 0, 0, 0, 1, 0, -0.071816, 0, 0, 1);">
        <img src="https://mdmwus2storage.blob.core.windows.net/mdm-webportal-stage/doors/fa0f0641-73d9-e911-885d-5882a89b3e5b.png" style="width: 100%; height: 100%; filter: contrast(1);">
    </div>
</div>
</div>

Answer 1

您有几个拼写错误:您正在使用 style="clip-path: url("#svgPath0");...。您需要使用 style="clip-path : url('#svgPath0');... 代替。

<div id="houseViewer" style="background-image: url('/images/gallery/5.jpg\');">
    <svg id="houseCanvas" version="1.1" style="overflow: hidden; position: relative; width: 986px; height: 739.5px; top: 1.25px; left: 0px;" viewBox="0, 0, 986, 739.5">
        <defs id="svgDefs">
            <clipPath id="svgPath0" class="svgPath">
                <path d="M0,15.268249511718807     Q161.72368421052633,-15.600171540912811 309.35526315789474,15.939302143297766 L310.69736842105266,146.12351266961355 L-1.3421052631578974,152.83403898540303 Z">
                </path>
            </clipPath>
            <clipPath id="svgPath1" class="svgPath">
                <path d="M0,14.435082686574901 Q73.81578947368422,-15.091233102898798 153.67105263157896,15.777187949732763 L154.34210526315792,144.61929321289068 L0.6710526315789593,149.31666163394334 Z">
                </path>
            </clipPath>
        </defs>
    </svg>

    <div class="doorImageDiv" id="outerDiv0" style="clip-path: url('#svgPath0'); position: absolute; left: 0px; top: 1px; transform-origin: left top; transform: translate(36.5724px, 322.607px);">
        <div id="clip0" class="doorImageDiv" style="position: absolute; width: 975px; transform-origin: left top; height: 980.268px; top: 0px; transform: matrix3d(0.331386, 0, 0, 4.7e-05, -0.001508, 0.154379, 0, -1e-05, 0, 0, 1, 0, 0.148959, 0, 0, 1);">
            <img src="https://mdmwus2storage.blob.core.windows.net/mdm-webportal-stage/doors/fa0f0641-73d9-e911-885d-5882a89b3e5b.png" style="width: 100%; height: 100%;">
        </div>
    </div>
    <div class="doorImageDiv" id="outerDiv1" style="clip-path: url('#svgPath1'); position: absolute; left: 0px; top: 1px; transform-origin: left top; transform: translate(424.441px, 320.756px);">
        <div id="clip1" class="doorImageDiv" style="position: absolute; width: 975px; transform-origin: left top; height: 979.435px; top: 0px; transform: matrix3d(0.162716, 0, 0, 3.3e-05, 0.000758, 0.152417, 0, 0, 0, 0, 1, 0, -0.071816, 0, 0, 1);">
            <img src="https://mdmwus2storage.blob.core.windows.net/mdm-webportal-stage/doors/fa0f0641-73d9-e911-885d-5882a89b3e5b.png" style="width: 100%; height: 100%; filter: contrast(1);">
        </div>
    </div>
</div>