0

SVG での実験に失敗した後、別の手法を使用してクリップパス(矢印のようなカスタム ポリゴン) をに適用しようとしています<div>。魔女には他の HTML 要素が含まれています。

<div class="firstbox">
    <h2>Title</h2>
    <a href="#">This is a link</a>
    <img src="#">
</div>

の外側の背景に関する問題は<div>、表示されるはずです-「偽のマスク」を作成するための png オーバーはありません。HTML コンテンツは JS なしで表示<canvas>され、AFAIK なしで表示され、検索ボットによってインデックス化できる必要があります。

これが達成したいことです：http://min.us/mboMRhEQSq

4

2 に答える 2

0

さて、いくつかの調査の後：

  1. クリップパスはMozillaが望んでいて役立つものですが、Firefoxだけがそれをサポートしています。
  2. マスクCSSプロパティはChromeでのみサポートされています。
  3. HTMLを内部に含むSVGをコーディングし、コンテンツをクリップすることでタスクを補うことができますが、IE9はforeignObject内にHTMLをレンダリングしません。
  4. SVGを使用して背景画像のみを切り取るのは解決策ですが、ブロック内をアニメーション化する（クリップ内に保持するため）のは、jQuerySVGプラグインでは非常に難しい作業です。SVG用のRaphaëlJSフレームワークはインラインSVGをサポートしていません。
  5. コンテンツ上でPNGを使用しても機能しません。下の背景は、<div>表示されている必要があります。
  6. タスクに使用<canvas>することはできません。内部のhtmlコードをレンダリングするために作成されたものではありません。また、「ホバー時」にアニメーション化するSVGのようなイベントハンドラーはありません。

したがって、答えは非常に明確です。HTML要素のグループをクリップ（作成）する方法はありません。製図板に戻ると思います。

于 2012-06-20T19:35:41.203 に答える
0

（あなたの例のように）短い文字列が2つしかない場合は、プレーンなsvgを使用し、svg内でマスクを使用することをお勧めします。これは現在、svg をサポートするすべてのブラウザーで機能します。または、まだ標準化されていない提案 (提案 1 ～ 3)の1 つをすべてのブラウザーが実装するのを待つこともできます。

svg でマスクを使用する例を次に示します。svg 1.1 testsuiteにはさらにいくつかあります。masking-* という名前のテストを探してください。

于 2012-06-21T11:56:31.667 に答える