Google chrome d3:Chrome/Safari奇怪地渲染剪辑遮罩和图案的过渡 例子

以下问题请参考示例：

首先用firefox打开它，查看想要的行为。 然后在chrome或safari中打开它，查看我发布的行为

工作流程 我使用d3.voronoi函数从坐标计算voronoi图。 每个坐标通过绑定数据获得自己的圆，该数据可视地包括： -白色圆形边框 -中间的肖像画居中

因为我使用的是多边形/voronoi图，所以我不得不使用背景图案（带有肖像） 必须在每个圆的坐标处用一个剪切圆将它们剪切掉，这样肖像就可以看到了 在圈子里。 这就是我（在本例中）最初创建模式的方式。每个圆圈一个：

function generateIcons(){
  // test: create 50 patterns for testing, all kirk images
  // ids: 1,2,3 … 50

  console.log("creating kirk test pattern");
  iconContainer = background.append("defs").attr("id", "mdef");

  for (var p_id = 1; p_id <= 50; p_id++) {

    iconContainer.append("pattern")
      .attr("id", "icon_" + p_id)
      .attr("patternUnits", "userSpaceOnUse")
      .attr("PatternContentUnits","objectBoundingBox")
      .attr("height", circleSize*2)
      .attr("width", circleSize*2)
      .append("image")
        .attr("x", 0)
        .attr("y", 0)
        .attr("height", circleSize*2)
        .attr("width", circleSize*2)
        .attr("xlink:href", "images/kirk.jpg");
      }
  }

并将其剪辑：

// create clip paths, when new tags come in
  clips.selectAll("clipPath")
      .data(mainData.tag[step], function(d){return d.id;})
    .enter().append("svg:clipPath")
      .attr("id", function(d, i) { return "clip-"+d.id;})
    .append("svg:circle")
      .attr('cx', function(d) { return d.loc[0]; })
      .attr('cy', function(d) { return d.loc[1]; })
      .attr('r', circleSize);

当这两个圆圈重叠时，它们就会合并（就像细胞（生物学））一样，这是完成的 用voronois多边形。（见：）

问题

• 在执行更新例程（每2000ms）时，我根据读取的新坐标计算新的voronoi图。当我想移动/转换带有通过剪裁遮罩创建的肖像的圆时，我必须移动：
• 整体格局
• 剪辑遮罩
• 环绕剪贴肖像的白色圆圈

这在firefox中运行正常！然而，在Chrome和Safari中，即使是白色圆圈也不能顺利移动。图案/剪裁遮罩的转换似乎根本不起作用。 我已经创建了一个问题的基本示例（请参见顶部） 我已经尝试过只移动白色圆圈，这在所有浏览器上都非常有效。但是，当移动剪辑遮罩和模式开始发挥作用时，这三种浏览器之间会变得非常混合

有人知道这是否是一个与浏览器相关的bug吗？这是一种不寻常的情况，所以可能不会发生在太多人身上

还是我做了一些不太正确的步骤

---

谢谢

为什么你不能用图像填充圆圈，为什么要剪掉它呢？为什么要将所有元素一起移动，为什么不将它们一起移动并转换到位置？@标记我需要剪切，因为我想要从voronoi图中剪切，或者更准确地说，是从

d3.geom.voronoi

返回的多边形。如果我不想从voronoi计算中得到切割，它就像你说的那样工作，没有问题。这是我的第一个版本，但我的同事希望重叠时圆合并，所以我们使用voronoi图来计算圆之间的切割。我用这个例子作为可视化的开始：@Mark我用

g

尝试了剪辑和边框圈的方法。正如预期的那样，过渡现在运行良好。但是，我不确定如何在两个元素之间进行切割：。要启用剪裁并仅查看圆圈，请取消对第178-182行的注释。剪切时，我希望voronoi图中的剪切是可见的。任何暗示都将不胜感激：）

// create clip paths, when new tags come in
  clips.selectAll("clipPath")
      .data(mainData.tag[step], function(d){return d.id;})
    .enter().append("svg:clipPath")
      .attr("id", function(d, i) { return "clip-"+d.id;})
    .append("svg:circle")
      .attr('cx', function(d) { return d.loc[0]; })
      .attr('cy', function(d) { return d.loc[1]; })
      .attr('r', circleSize);