Raphael で生成された SVG 要素の上に html 要素 (動的なテキストの折り返しとサイズ変更を可能にするため) を重ねています。
問題は、html の下の SVG 要素にイベント (mousedown、mouseup など) が割り当てられていることです。SVG 要素自体は、実際には raphael.freeTransform プラグインを介してドラッグおよびスケーリング可能です。
もちろん、一番上の html では、この要素はもはやイベントを取得しません。
これを回避する方法を探していますが、どこから始めればよいか本当にわかりません。ソリューションはブラウザ間で互換性がある必要があるため、要素がクリックを無視できるようにする最近のブラウザの一部の新しい機能セットは、受け入れられるソリューションではありません。
注: SVG 自体でテキストをレンダリングすることにより、同じ機能を実現するあらゆる方法を試しましたが、動的な方法でやりたいことを正確にエミュレートする方法は実際にはありません (つまり、ユーザーの入力に応じてテキストのサイズが変更され、ラップされます)。
私が現在考えることができる唯一の解決策は、どうにかしてforeignObjectsを使用することですが、悲しいことに、誰かがプラグインを認識していない限り、Raphaelはそれらをサポートしていませんか?