柔軟な方法は、HTMLで

Question

ゴールを影付きの泡のようなサムネイルをレンダリングする

http://min.us/moStWhsGd http://k.minus.com/jbkSDvCUDvhYcj.jpg

サイズと影が変更される場合があります。

私の最初のアイデアはもちろんpngオーバーレイでしたが、柔軟性に欠け、楽しいことでもありません。しかし、古いie-sのフォールバックとしては常に可能です。

また、回転したdivで「テール」をレンダリングすることも考えられましたが、その中に背景が一致するとピタになります。

もっと良い方法はありますか？キャンバスか、おそらくsvgのマスク？ expにほとんどない。これらの技術では、始めるためのいくつかのヒントは非常に高く評価されます。

UPDATE：まあ、それは私がドキュメントやブラウザinconcistenciesをナビゲートのいくつかの時間後にSVG思い付いたものです：

1. 影のためのクリッピングパスとSVGフィルタの両方を適用することは不可能と思われますhtml要素をCSSで取得するので、全体の記事を<svg>にレンダリングする必要があります。

2. feImage要素2）foreignObjectとimgまたはdivの背景を持つ1）フィラーに画像を埋め込む2つの方法が見つかりました。

   最初の方法は、 FFとChromeの両方で動作します。この

   <svg filter="url(#dropshadow)"> <rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/> </svg>

   のように（私はそれがオペラ座で働くとIE9をしようとしなかった作りに失敗しました）。しかし、この方法でFFの画像は、少なくともサイズ変更された場合にはぼやけて見え、Chromeでは元の画像よりも明るく見えます。

   各画像に対して個別のフィルタを作成する必要があるため、研究の観点からのみ興味深いものになります。

   第二の方法は、それはFFで完璧に動作しますが、クロムやオペラでもないが（IE9をしようとしなかった）foreignObjectへのパスをクリッピング適用することができ、この

   <svg filter="url(#dropshadow)"> <foreignObject width="140" height="140" clip-path="url(#clipPath)"> <img src="img/ourImage.png" height="140" /> </foreignObject> </svg>

   のように見えることができます。

3. FFだけがclippingPathの中の複数の要素をサポートしているようです：複数の四角形を追加すると、そこに複数の矩形が追加されます。ですから、Chromeで最初の方法を使うためには、InkScapeにpathを作成しなければなりませんでしたが、FFでは2つの矩形、1つは小さく、もう1つは回転した "バブル"を作成しました。

ので、第二の方法は、それがかなり柔軟で使いやすい、かなりいい表示されます。 FF以外の唯一の他のブラウザでは、より良いクリッピングパスをサポートする場合は...ここで

はjsFiddle例は以下のとおりです。http://jsfiddle.net/B7593/11/ので、FFでのみ動作2つの長方形の組み合わせクリッピングパスで両方のバリアントを示し、http://jsfiddle.net/B7593/10/はInkscapeで生成されたパス要素を使用し、部分的に動作しますクロム。

UPDATE2：私には恥ずかしがりますが、画像をsvgに埋め込むには3番目で最も適切な方法があります：image elementです。

Answer 1

あなたはSVGとしてそれをしたい場合は、ここで私はそれを行うだろう方法は次のとおりです。

• は、使用して、バブルの形状を定義するクリップパスを使用するアバター
• ためのラスタ画像を使用パス要素
• は、ドロップシャドウを次に

REUを取得する画像要素にSVGフィルタを適用する画像要素

にクリップパスを適用します基本的なセットアップを行い、ちょうどアバターのURLを置き換えてください。 InkscapeまたはIllustratorを使用して素早くプロトタイプを作成するのは簡単です。

更新： ここには私が意味していたもののexampleがあります。

Answer 2

svgからhtmlへの変換0.7のGoogle検索を実行します。 コンバータエンジンで検索を使用して、クリップアートライブラリを開き、そのサイトをバブルで検索します。 一般的なものを探してInkscapeで変更します JavaScriptに変換してください 3つ以上のオプションがあります。 あなたは純粋なラファエロに吹き出しがあります。 Raphaelスケール（x、y）を使用して、バブルと関連するシャドウを動的に制御する場所はどこでもかまいません。