Question

实施例

请参阅以下问题的示例：

http://jsfiddle.net/ssmvabxp/4/embedded/result/

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

工作流程

我正在使用d3.voronoi函数从坐标计算voronoi图。每个坐标通过绑定数据获得自己的圆，视觉上包括： - 白色圆形边框 - 中间的中心肖像

因为我使用的是polygons / 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");
      }
  }

我用voronoi多边形填充：

// create new voronoi paths, when new tags come in
   paths.enter().append("svg:path")
    .attr("d", polygon)
  .style("fill", function(d){return "url(#icon_" + d.point.id + ")"; }) // load kirk pattern
    .attr("id", function(d,i) { return "path-"+d.point.id; })
  .attr("class", "voronoi-cut");

并剪辑它们：

// 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多边形。（见：http://i.imgur.com/W4QoXDR.png）

问题

在做我的更新例程（每2000毫秒）时，我从我读过的新坐标计算新的voronoi图。当我想用剪辑蒙版创建的肖像移动/转换圆圈时，我必须移动：
整个模式
剪贴蒙版
围绕剪切肖像

这在firefox中运行正常！但是在Chrome和Safari中甚至没有白圈顺利移动。模式/剪切蒙版的转换似乎根本不起作用。 我已经创建了一个问题的基本示例（请参阅顶部）我已经尝试过只移动白圈，这对所有浏览器都很有用。但是当移动剪辑蒙版和模式发挥作用时，它在三个浏览器之间变得非常混杂。

有人知道这可能是与浏览器相关的错误吗？这是一个不寻常的情况，所以它可能不会发生在人们身上。

或者我做了一些不太正确的步骤？

谢谢！

d3：Chrome / Safari奇怪地渲染剪贴蒙版和图案的过渡

实施例

工作流程

问题

0 个答案: