Круг clipPath не наследует правильную позицию в Firefox

Question

Я использую круговой путь отсечения для моих узлов (в 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 не наследует положение узла (то есть от данного элемента).

В Chrome/Safari все работает отлично, и когда я открываю консоль и наводю курсор на элемент круга, который находится внутри элемента clipPath, он четко показывает круг в правильном месте (с размерами 84x84, поскольку радиус равен 42).

Но в Firefox я не вижу изображений, и когда я наводю курсор на круг с помощью консоли, я вижу, что он расположен в левом верхнем углу экрана с размерами 0x0.

Есть идеи, что я здесь делаю не так? Должен ли я указать абсолютную позицию круга для firefox или он должен уже понять из g-элемента, в котором он находится?

Answer 1

Извиняюсь за ложную тревогу, но проблема здесь (как вы можете видеть в моем исходном коде) заключалась в том, что я использовал тот же идентификатор для моего родительского элемента g, как и для ссылки на мой clipPath! Я изменил атрибут "id" для моего пути клипа, чтобы он начинался со строки "clipPath-", и теперь он работает в Firefox. Не уверен, почему это по-разному повлияет на разные браузеры (именно поэтому я как бы обошел все дома, пытаясь устранить ошибку), но, к счастью, это довольно тривиальное исправление!