2011-01-25 7 views
1

イメージをロードし、そのイメージに複数のカラーフィルタを適用することによって、パターンを作成したいと考えています。しかし、私はinin2のプロパティを理解できないので、それは機能していないと思う。パターン内のSVG feBlend?

<img>を作成し、fill="green"と設定してからin="SourceGraphic" in2="FillPaint"を使用してください。しかし、私はファイヤーフォックスとクロムの両方で白いキャンバスを見る。誰もがなぜこれが動作していないか知っていますか?ブレンドはin*="FillPaint"と動作しますか?私もちょうど別の長方形と画像を使用して、2つをin2="BackgroundImage"とブレンドしてみましたが、どちらもうまくいきませんでした。たぶん、 "背景"は、私がpatternの中にいると思うものではないからでしょうか?フィルタの入力は、最新のブラウザでサポートされていないよう

<filter id="multiply" primitiveUnits="objectBoundingBox"> 
<feBlend in="SourceGraphic" in2="FillPaint" mode="multiply"/> 
</filter> 

<pattern id="pattern" x="0" y="0" width="32" height="32" viewBox="0 0 
    32 32" patternUnits="userSpaceOnUse"> 
<image x="0" y="0" width="32" height="32" fill="green" xlink:href= 
    "dirt.png" filter="url(#multiply)"/> 
</pattern> 

<rect x="0" y="0" width="64" height="64" fill="url(#pattern)"/> 
+0

SVGドキュメントのfeBlendの例が気づいただけです。http://www.w3.org/TR/SVG/images/filters/feBlend.svgはいずれのブラウザでも動作しません。 – Saucerful

+0

その例はインクスケープ。もちろん、ブラウザで使用するためにそれらを構築するのであれば、それは役に立ちません。 –

+0

問題はfeBlendの実装にあるようです。私はfeColorMatrix(対角行列は乗算と同じです)を試してみました。私はそれがパフォーマンス上の見解をどのように比較しているのか分かりませんが、私はそれが重要ではないと思うようにタイル張りされた小さなイメージでのみ行います。 – Saucerful

答えて

1

Fillpaint:

は、ここに私のコードです。そういうわけではないのです。