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

Question

我有一个带有内联svg clipPath的svg对象。 Evereything似乎与每个现代浏览器兼容。我在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;会导致相同的结果（在WebKit浏览器中会忽略clipPath）。

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-dce z-index:10;进行测试，就像魅力一样。

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

喜欢设计btw。