Question

以下svg剪辑路径在本地工作正常但不在线：

<svg xml:space="preserve" enable-background="new 0 0 200 166.414" viewBox="0 0 200 166.414" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <clipPath id="mask1">
        <rect height="116.673" width="116.673" stroke-miterlimit="10" stroke="#fff" fill="none" transform="matrix(0.7071 0.7071 -0.7071 0.7071 87.559 -44.972)" y="24.871" x="39.729"/>
    </clipPath>

    <line y2="82.438" x2="200" y1="82.438" x1="180" stroke-miterlimit="10" stroke="#fff" fill="none"/>
    <line y2="82.438" x2="17" y1="82.438" x1="0" stroke-miterlimit="10" stroke="#fff" fill="none"/>
    <rect height="116.673" width="116.673" stroke-miterlimit="10" stroke="#fff" fill="none" transform="matrix(0.7071 0.7071 -0.7071 0.7071 87.559 -44.972)" y="24.871" x="39.729"/>
    <rect height="107.393" width="107.393" stroke-miterlimit="10" stroke="#fff" fill="none" opacity="0.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 87.5595 -44.9719)" y="29.511" x="44.369"/>
    <image xlink:href="/content/events/eventImage_5.jpg" width="100%" height="100%" clip-path="url(#mask1)"/>
</svg>

也许这是我失踪的其他东西..我一直在尝试各种各样的方式，但仍然没有运气。可以在此处看到实时示例：http://akrotirilounge.gr/index

您可以在最顶部看到应将事件图像剪裁为菱形的示例，而不是剪裁它。这在所有兼容的浏览器中都可以完美呈现。

谢谢

Answer 1

您有<base>代码

<base href="http://akrotirilounge.gr/" />

所以当你写clip-path="url(#mask1)"

时

你实际上在写clip-path="url(http://akrotirilounge.gr/#mask1)

所以你可以做其中一个：

修复剪辑路径以包含绝对网址
将/图像添加到剪辑路径
删除<base>元素

SVG剪辑路径在本地工作但不在线

1 个答案: