javascript - クリップされた要素のboundingClientRectを取得する

Question

クリップされた SVGElement の boundingClientRect を取得する必要があります。この情報を使用して、SVG 要素の上に HTML 要素を配置したいと考えています。

私の SVG は次のようになります (単純化すると、元の SVG には複数のカスケード ビューポートと複数のカスケード トランスフォームの両方があります)。

<svg width="96" height="80">
  <clippath id="clip">
    <path d="M 0 0 L 96 0 L 96 80 L 0 80 Z"/>
  </clippath>
  <g clip-path="url(#clip)">
    <image x="0" y="-8" width="96" height="96" xlink:href="…" transform="…"/>
  </g>
</svg>

SVGGElement の上に HTML 要素を配置したいと考えています。これを行うには、次のboundingClientRectを取得します

• 配置される HTMLElement
• HTMLElements 親
• エレメント ？これにより、クリッピングが適用された SVGG 要素の boundingClientRect を取得できます

Chrome では、これは SVGPathElement の boundingClientRect を取得することで機能します。Opera と Firefox では、結果の clientRect の幅と高さは 0 になります (おそらくパス要素が表示されないため)。SVGGelement 自体の boundingClientRect は、適用されたクリップパスに関係なく、含まれている SVGImageElement からその寸法を取得します。

SVGUseElement を介して SVGPathElement を参照し、そのboundingClientRectを取得しようとしました-これはうまくいくようでした。

可視性が非表示でポインターイベント: なしに設定されている別の DOM 要素を導入する必要があるか、それともより良い解決策を知っている人はいますか?