0

我有一个带有内联 svg clipPath 的 svg 对象。一切似乎都与每个现代浏览器兼容。我只是在 Safari 或 Google Chrome 等 WebKit 浏览器中遇到问题。

内联 SVG 剪切路径：

<svg>
    <defs>
        <clipPath id="clippath" clipPathUnits="objectBoundingBox">
            <polygon points="0 1, 0 0, 1 0, 1 1">
        </clipPath>
    </defs>
</svg>

剪裁内容的 SVG 对象：

<svg>
    <foreignObject height="100%" width="100%" clip-path="url(#clippath)">
        <div ...>
        <div ...>
        <div ...>
    </foreignObject>
</svg>

当我在 svg 对象（幻灯片）的内部元素上触发不透明的 CSS3 过渡时，clipPath 在过渡期间被忽略。

clipPath 是在“foreignObject”上定义的。此对象是剪辑内容的父对象。我不知道如何更好地描述它。

这只是我的测试 HTML 项目： http: //ogs.dev.ka-mediendesign.de/

是否有任何解决方案可以使不透明动画与剪切路径一起使用？幻灯片对象必须定义为position:static;，因为position:absolute;结果相同（clipPath 在 WebKit 浏览器中被忽略）。

在此处输入图像描述

4

1 回答 1

0

使用旋转作为封面的 div 怎么样？

<div class="clipath" style="
position: absolute;
background: #fff;
height: 200px;
bottom: -150px;
left: -100px;
width: calc(100% + 200px);
z-index: 1;
transform: rotate(-5deg);
"></div>

将其添加到您的parallelogram-box parallelogram-svg-path-topflat-true parallelogram-svg-path-bottomflat-falsediv 中。

还给.headline-text-dce z-index:10;Tested 它就像一个魅力。

小提琴：https ://jsfiddle.net/0m17kdrj/1/

顺便说一句，喜欢这个设计。

于 2016-05-25T19:37:02.560 回答