次のように、ノード (d3.js 内) に循環クリップ パスを使用しています。
<g class="node" id="140" transform="translate(392.3261241288836,64.3699106556645)">
<image class="mainImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/manual-story-140.jpg" width="100" height="116.66705555685185" x="-50" y="-50" clip-path="url(#140)">
</image>
<clipPath class="clipPath" id="140">
<circle class="clipPathCircle" stroke-width="1" r="42"></circle>
</clipPath>
<circle class="outlinecircle" stroke="#0099FF" fill="url(#myLinearGradient1)" stroke-width="3" r="42"></circle>
</g>
しかし、Firefox では、clipPath 要素内の circle 要素がノードの位置を (つまり、g 要素から) 継承しないため、画像が読み込まれません。
Chrome/Safari では、すべてがうまく機能し、コンソールを開いて clipPath 要素内にある circle 要素にカーソルを合わせると、正しい場所に円が明確に表示されます (半径が 42 であるため、84x84 の寸法で)。
しかし、Firefox では画像が表示されず、コンソールを使用して円の上にカーソルを合わせると、サイズが 0x0 の画面の左上に配置されていることがわかります。
ここで私が間違っていることはありますか？firefox の円の絶対位置を指定する必要がありますか、それとも g 要素から既に理解している必要がありますか?