0

我正在为我的节点（在 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 元素内的圆形元素上时，它清楚地显示了正确位置的圆形（尺寸为 84x84，因为半径为 42）。

但是在 Firefox 中，我看不到任何图像，当我使用控制台将鼠标悬停在圆圈上时，我看到它位于屏幕的左上角，尺寸为 0x0。

有什么想法我在这里做错了吗？我是否必须为 firefox 提供圆圈的绝对位置，还是应该已经从它所在的 g 元素中理解？

4

1 回答 1

0

为误报道歉，但这里的问题（如您在我的原始代码中所见）是我在父 g 元素上使用了与引用我的 clipPath 相同的 id！我将剪辑路径的“id”属性更改为以字符串“clipPath-”开头，现在它可以在 Firefox 上运行。不知道为什么这会对不同的浏览器产生不同的影响（这就是为什么我有点绕着房子试图解决这个错误），但幸运的是，这是一个非常微不足道的修复！

于 2015-10-06T16:01:14.180 回答