1

Firefox で .svg ファイルへのリンクを含むクリップパスを使用しても問題はありませんが、Safari はそれらの使用を拒否しているようです。

私の WIP ページhttp://www.omakadesign.comを Firefox で読み込むと、メニューの下部に蝶のパターンが表示されますが、Safari で読み込むと、メニューは完全に長方形になります。

関連する行が main.css (221) に表示され、次のようになります。

    clip-path: url("../img/menu-news.svg#news-clip");

clip-path と Safari に関する情報はほとんどないようで、このサイトでもそれに関する質問はあまりないようです (私が見たことがあると信じてください)。しかし、繰り返しになりますが、Firefox でも clip-path を使用した最も基本的なインライン svg の例を取得することさえできないため、このトピックで欠けている基本的なものがあるのではないでしょうか?

（また、これは別の主題ですが、これらのメニューの下部にパディングとマージンの両方がある理由は、最小幅を使用してそれらをゼロにしているため、私には謎です...）

アップデート：

私はテストを行い、マスクタグを含む .svg を作成し、代わりに上に表示されるクリップパス行を css マスクに置き換えました (Firefox スタイルエディターで試してみたい場合はまだ 221 です)。 Firefox と Safari ではまだスキップされます:

    mask: url("../img/menu-news-mask.svg#news-mask");

(最終更新: 解決策が見つかりましたが、さらに 5 時間投稿することは許可されていません...非常に具体的な SVG を使用し、Safari では -webkit-mask を使用する必要があります。)

4

3 に答える 3

3

解決策を見つけました。非常に具体的な SVG コードを使用する必要があります。この男の例に倣うと、クリッピングは Safari でも機能します。

https://github.com/Modernizr/Modernizr/issues/213#issuecomment-1149691

（自分の最初の質問に自分の回答を投稿して申し訳ありませんが、私は本当に必死でした.

編集: IE9 では動作しませんが、これはあまり気にしませんが、動作する人には注意してください (フォールバックは、私にとっては単純な長方形のメニューであり、それでも動作します)。

于 2013-05-16T06:48:47.607 に答える
1

Modernizr の github へのリンクをありがとうございます。

画像をクリッピングする場合の注意点として、重要なのはパスが clipPath 内にある必要があることです。

補足として、SVG コードを Illustrator からエクスポートする場合。これの代わりに実際のパスを使用してください。

<defs>
  <path id="path" d="....">
</defs>
<clipPath id="clipping">
  <use xlink:href="#path"/>
</clipPath>
<image clip-path=url(#clipping) ...>

このような実際のパスに...

<clipPath id="clipping">
  <path id="path" d="....">
</clipPath>
<image clip-path=url(#clipping) ...>

FF、Chrome、Safari、Opera、IE9 & 10 で動作します。jsfiddleは次のとおりです。

編集

私が気付いた元の問題は、私が持っていたものとは少し異なる問題です...これは、svgパスを使用して、svgの外側の画像をimgタグとしてクリップしています。残念ながら、まったく同じ方法を試したとき、IE 10 でさえ機能しませんでした。したがって、単一の画像がある場合は、パスで img タグをクリップするのではなく、svg 自体の内部に画像を埋め込むのが最善です。それはIE9と10で機能し、その後いくつか..

于 2013-08-21T14:46:13.573 に答える
0

質問の 2 番目の部分について (..これらのメニューの下部にパディングとマージンの両方がある理由..):

main.css 行 95

nav a {
  background: none repeat scroll 0 0 #616161;
  color: white;
  display: block;
  font: 12px/20px Lucida Sans Unicode,Lucida Grande,Lucida Sans;
  margin-bottom: 10px;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
}
于 2013-05-15T20:26:47.963 に答える