WebKit CSS3过渡和带有clipPath的SVG foreignObject溢出

Question

我有一个带有内联 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 浏览器中被忽略）。

Answer 1

使用旋转的 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-false div 中。

也给.headline-text-dcez-index:10; 测试它就像一个魅力。

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

喜欢这个设计。