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元素中的圆形元素不会继承节点的位置（即来自g元素）。

在Chrome / Safari中，一切都运行良好，当我打开控制台并将鼠标悬停在clipPath元素中的圆圈元素上时，它会清楚地显示正确位置的圆圈（自半径以来尺寸为84x84）是42）。

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

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

Answer 1

为误报道歉，但这里的问题（正如你在我的原始代码中看到的）是我在我的父g元素上使用相同的id，就像我引用我的clipPath一样！我将剪辑路径的“id”属性更改为以字符串“clipPath-”开头，现在它适用于Firefox。不确定为什么会以不同的方式影响不同的浏览器（这就是为什么我有点围绕房子试图解决这个问题），但幸运的是，这是一个相当简单的修复！

clipPath圈不继承Firefox

1 个答案: