Question

我有两个div，每个div都包含一个图像，我在上面放置了一个剪切路径以弯曲图像的顶部，然后进行平移。这显示得很好。

当我去打印页面时出现问题。 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>

CSS剪辑路径未显示在打印预览中：为什么？

1 个答案: