Raphael 要素に、要素が移動するにつれて移動する塗りつぶしを与えるにはどうすればよいですか? HTML 要素の CSSbackground-imageが、移動position: absolute;した場所に対して同じ位置を維持するようにするにはどうすればよいでしょうか?
デモの例: Raphael 要素 (三角形のパス) の背景画像パターンを、HTML 要素 (四角形の div) と同じようにドラッグするにはどうすればよいですか?
http://jsbin.com/oxuyeq/8/edit
この質問は基本的に、Raphael.js / IE でパターンを「修正」するにはどうすればよいですか?の反対です。偏光メガネシミュレーターを使用して、すべてのブラウザー (IE8 を含む) で、回避しようとしていた IE 固有の動作を一貫して発生させたいと考えています。
他の質問で詳しく説明されているように、IE8 (VML) のみで、Raphael 要素は希望どおりに動作します。しかし、これでも不安定です。要素setSizeの呼び出しpaperや塗りつぶしの再定義などのさまざまなこと (本質的に、再描画を強制するもの) により、他の動作に切り替わります。
純粋な SVG に対して this に似た質問がありますが、執筆時点では適切な回答がなく、確かに Raphael で機能するものはありません。
編集 2 : SVG モードで何が起こるかを見ると、すべての Raphael 変換も自動的に同じ行列変換を svg<pattern>要素に行うようです。これが、私が回避しようとしている動作の原因だと思います-私はpatternContentUnitsとpatternUnitsは無関係だと思います。ここに関連していると思われる未解決の問題があります (行の横にある clip-rect で同じ問題を強調していますthis.pattern && updatePosition(this);) - https://github.com/DmitryBaranovskiy/raphael/issues/638
そのため、パターンには適用せずに要素に変換を適用するカスタム属性を定義することも考えられます。難しそうですね - Raphael をハッキングするか、大量の Raphael 変換コードを複製する必要があるかもしれません。うまくいけば、何か他の方法があります。そして、神は私たちがVMLでこれを機能させるのを助けてくれます...
編集 3:関連する可能性のある情報です。この問題があるのはパスの塗りつぶしだけではありません。で作成されたRaphaelimage要素にpaper.image()は、SVG モードではこの問題はありませんが、IE8 VML モードでは非常によくない非常によく似た問題があります。これは、画像要素を移動させるいくつかの方法のデモです。これは、非 IE ではすべて問題なく動作し、IE ではすべて失敗することを示す比較です。
