0

画像を切り取りたい。これにはclip-pathを使用しました。Safari と Chrome ではうまくいきましたが、Firefox ではうまくいきませんでした。このウェブサイトですべての質問を検索しましたが、これが私のコードの最後の形です。しかし、それでも Firefox で動作させることはできませんでした。

これは私のイメージです：

<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">

そして、これは私のCSSです：

.sliderimg {
   width: 100%;
   height: 357px;
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
   /*Firefox*/
   clip-path: url("#slider-poly");
}

そして最後にこれを私のインデックスファイルに追加しました：

<svg width="0" height="0">
    <defs>
      <clipPath id="slider-poly"  clipPathUnits="objectBoundingBox">
        <polygon points="0 0, 1 0, 1 0.85, 0 1" />
      </clipPath >
  </defs>
</svg>

それでも、Safari と Chrome では機能しますが、Firefox では機能しません。

4

2 に答える 2

1

仕様は、それが要素でなければならないと言ってい<clipPath>ます。あなたのマークアップには<imagePath>、私が知る限り有効な SVG でさえない が含まれています。つまり、Safari と chrome は仕様に準拠していません。

于 2016-03-27T14:39:46.797 に答える
1

Firefox のサポートには 3 つのオプションがあると思います (3 つすべてをテストしました)。

  1. 絶対パスの使用。

  2. 外部の svg ファイルを参照しています。正しい SVG ドキュメント形式を使用してください: https://www.w3.org/TR/SVG/struct.html

例えば：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <defs>
    <clipPath id="slider-poly">
    <polygon points="100,0 300,0 200,200"/>
    </clipPath>
  </defs>
</svg>

スタイルシートで:

clip-path: url(filename.svg#slider-poly);
  1. 内部スタイルシートの使用。
于 2016-03-27T17:06:17.793 に答える