5

ページの HTML 要素の 1 つに適用された SVG クリップ パスを使用している Web ページがあります。

SVG 要素: 

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path d="M150 0 L75 200 L225 200 Z" />
        </clipPath>
    </defs>
</svg>

クリッピング パスが適用される HTML 要素

<div id="clipMe"> </div>

クリップを定義する CSS

#clipMe {
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
    width: 200px;
    height: 200px;
    background-color: red;
}

同じページにさまざまな要素があり、そのうちのいくつかは相対的に配置されています。

<div style="position: relative">
    <strong>My parent is relative</strong>
</div>

#clipMeSafari (8.0.4) のみで、 div から clipPath (SVG 要素内) へのリンクが損なわれていない限り、これらの相対的に配置された要素は表示されません。

FF と Chrome の最新バージョンは期待どおりに表示されます。

position:プロパティを相対以外のものに変更すると、すべてが期待どおりに表示されます。

クリッピング パスを無効にすると (SVG 要素をまとめて削除するかclip-path:、CSS からプロパティを削除して)、期待どおりにすべてが表示されます。

JSfiddle:

繰り返しますが、これは Safari のみです。それをSVGクリッピングパスに切り分けるのにしばらく時間がかかったposition: relativeので、同様の結果が得られる他の状況があると推測しています。

誰かがこれに遭遇したり、相対的に配置された s を表示するための提案はありますか?

編集
これはMacのものかもしれません。OSX の Chrome と Firefox では期待どおりに表示されますが、iOS のどのブラウザーでも相対的に配置された DIV は表示されません。

何か案は？

4

2 に答える 2

9

-webkit-transform:translateZ(1px)クリップされた要素で使用してみてください。モバイルに表示されない場合は、他のプレフィックスも含める必要がある場合があります。デモ

GPUに配置することにより、ハードウェアアクセラレーションを強制します（基本的に、ブラウザーはレンダリングにもっと注意を払います）。

于 2015-04-25T01:22:06.353 に答える
0

2つのこと：

  1. css を使用して表示を設定: ブロック; position:relative; であるすべてのものに。
  2. clear:both; を試してください。position:relative; であるすべてのものに。

現時点でテストに使用しているサファリバージョンはありませんが、position:relative; を使用した以前の経験から知っています。ディスプレイをブロックするようにクリアまたは設定する必要がある場合があります。

編集：問題が見つかった可能性があります。

clip-path に対するブラウザーのサポートは、サファリhttp://caniuse.com/#feat=css-clip-pathでは部分的です

プレフィックス -webkit-clip-path を使用する必要があります。

于 2015-04-24T06:53:00.303 に答える