WebKit CSS3トランジションとclipPathを使用した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は "foreignObject"で定義されています。このオブジェクトは、クリップされたコンテンツの親オブジェクトです。私はそれをより良い方法で表現する方法は知らない。ここで

はちょうど私のテストHTMLプロジェクトです：http://ogs.dev.ka-mediendesign.de/

はクリッピングパスを使用した作業不透明度アニメーションを取得する任意の解決策はありますか？ position:absolute;が同じ結果になるため、スライドオブジェクトはposition:static;と定義する必要があります（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/

愛。