8

インライン SVG を使用すると、奇妙な問題が発生します。要素内にパスを作成し、この SVG を前の要素の上に重ねてセクションにクールな「カットアウト」効果を得るために、位置を指定してまたはCSS 属性を<svg>使用しています。topbottomrelative

これはChromeで完全に機能しますが、IE10およびFF25では、この「透明な」境界線をSVGの右上に表示します。「透明」を引用符で囲みます。これは、その下にある明るい緑色の背景が表示されているため、私が知る限り透明であるためです。これは、私がこれを見ている場所を正確に示しているスクリーンショットです (スクリーンショットは FF25 のものです)。

Firefox 25 での SVG ボーダーの問題

Codropsからセパレーターの提案を最初に取得しました。

テストページ

このテスト ページでは、「SVG トラブル セクション」というヘッダーのセクションが問題のあるセクションです。

私の技術がクロスブラウザでうまく機能するように、この問題を軽減する方法はありますか? または、私が目指している効果を達成するためのより良い方法はありますか? ありがとう！

更新 1: もう少しテストを行ったところ、Firefox でスクロールしているときに、上部の幻の「境界線」が消えて元に戻らないことがあることがわかりました。ページをリロードした後でも。これが消える原因はわかりませんが、これは問題の一部ではなく、単なる異常です。

更新 2: 要素を削除して、これを引き起こしている可能性があるものを確認し、コメント、「SVG トラブル セクション」の上のいくつかのセクション、およびフッターを削除した後、境界線が下のセパレータに移動しました。フッターのないページは次のとおりです: http://ignitepixels.com/sandbox/svg/sample.html

更新 3: 問題を再現するフィドルを作成しました。これにより、トラブルシューティングが容易になります: http://jsfiddle.net/fmpeyton/NuneR/

jsfiddle では特定のパネル サイズを保存できないため、Firefox 25 でこの問題を再現できたおおよそのサイズのスクリーンショットを添付しました: Firefox 25 のフィドル Update 1 に関連している可能性があります。良い。

4

3 に答える 3

5

丸めエラーなのか、svgアンチエイリアス ペイントの問題なのかはわかりませんが、私のテストでは、Firefox と IE10 の両方で一貫して動作することがわかったのは次の 1 つだけです (例を参照)。

両方の SVG パスをこれに変更します

.12 か所で余分に追加されていることに注意してください

<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>

これらの要素のtop/オフセットを変更しますbottom

オフセットを から-20pxに変更します-19.5px

これを追加.separator

    height: 20px;
    overflow: hidden;

確かにわからないのは、このソリューションがどれほど壊れやすいかということです。

于 2013-11-13T20:56:42.477 に答える