Chrome 34 SVG 错误

Question

我有一个 d3.js 应用程序，它将图像呈现为连接图中的节点。 Chrome 更新到 34.0.1847.131 后，修改图片上的 opacity 样式属性会导致显示异常。图像和其他 svg 元素将消失或部分呈现。我已经在 Chrome 33.0.1750.117 以及最近的 Firefox 和 IE 版本中进行了测试，它们都按预期工作。

我创建了一个 plunker 来演示这一点：http://plnkr.co/1jKDh5JMiuxouQyqZzGy。

如果有人可以给我一个解决方法，或者我的 plunker 有什么不正确的地方，请告诉我。否则，这似乎是 Chrome 34 的错误。我在 Google Chrome 论坛上报告了一个问题，并且在 Google Chrome 论坛上还有另一个帖子存在类似问题。

我的 Chrome 论坛帖子： http://bit.ly/1lXTHs0

另一个用户的 Chrome 论坛帖子： http://bit.ly/1ilYMsZ

Answer 1

作为临时解决方法：

一个元素的不透明度影响其他元素的问题似乎只适用于兄弟元素。因此，一种解决方案是将每个元素包装在其自己的 <g> 元素中（但仍将不透明度的更改应用于元素本身）。

此 SVG 代码显示正常：

<svg>
<g transform="translate(50,30)">
    <g>
        <image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="100" y="50" width="50px" height="50px" style="opacity: 0.30000000000000004;"></image>
    </g>
    <g>
        <image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="300" y="50" width="50px" height="50px" style="opacity: 0.30000000000000004;"></image>
    </g>
    <g>
        <image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="200" y="50" width="50px" height="50px"></image>
    </g>
    <g>
        <rect class="node" x="100" y="150" width="50" height="50" style="opacity: 0.30000000000000004;"></rect>
    </g>
    <g>
        <rect class="node" x="300" y="150" width="50" height="50" style="opacity: 0.30000000000000004;"></rect>
    </g>
    <g>
        <rect class="node" x="200" y="150" width="50" height="50"></rect>
    </g>
</g>
</svg>

Live example with comparison against the SVG from your original code

对于您的简单 d3 代码示例，这只需要一些额外的 append 调用：

var nodes = svg.selectAll("image.node").data(nodeData);

nodes.enter().append("g").append("image")
    .attr("class", "node")
    /* ...*/

svg.selectAll("image.node")
  .filter(function(d) {
    return d.id <= 2;
  }).transition().delay(1000).style("opacity","0.3");


var rects = svg.selectAll("rect.node").data(nodeData);

rects.enter().append("g").append("rect")
    .attr("class", "node")
    /* ...*/

svg.selectAll("rect.node")
  .filter(function(d) {
    return d.id <= 2;
  }).transition().style("opacity","0.3");

但是，请注意，添加到您的选择中的输入元素现在是 <g> 元素，而不是形状，因此您需要重新选择它们才能修改形状本身。您的示例代码已经这样做了，但并非所有示例都这样做。

这并不理想——除了额外的代码之外，你将 DOM 元素的数量增加了一倍，如果你有很多元素要开始，这可能会减慢速度——但现在实现然后再删除一次非常简单Chrome 用户已更新到补丁版本。