Image Chrome 34 SVG错误

我有一个d3.js应用程序，它将图像渲染为连接图中的节点。Chrome更新为34.0.1847.131后，修改图像上的“不透明度样式”属性会导致显示怪异。图像和其他svg元素将消失或部分渲染。我已经在Chrome33.0.1750.117以及最新的Firefox和IE版本中进行了测试，它们都按照预期工作

我创建了一个plunker来演示这一点：

如果有人能给我一个解决办法，或者如果我的plunker有什么不正确的地方，请让我知道。否则，它似乎是Chrome34的一个bug。我在谷歌Chrome论坛上报道了一个问题，谷歌Chrome论坛上还有一篇文章也有类似的问题

我的Chrome论坛帖子：

另一个用户的Chrome论坛帖子：

---

作为临时解决办法：

一个元素的不透明度影响其他元素的问题似乎只适用于同级元素。因此，一种解决方案是将每个元素包装在自己的

元素中（但仍将不透明度的更改应用于元素本身）

此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>

但是，请注意，添加到选择中的输入元素现在是

元素，而不是形状，因此您需要重新选择它们，然后才能修改形状本身。您的示例代码已经做到了这一点，但并非所有示例都能做到

---

这并不理想——除了额外的代码之外，您将DOM元素的数量增加了一倍，如果有很多元素要启动，这可能会降低速度——但现在实现它相当简单，而且在大多数Chrome用户更新到修补版本后再删除它。

听起来像个bug。您可能应该报告它：可能是或（都是Chrome34中的严重倒退）。Erik同意。Chrome35测试版看起来可以修复。我已经为Chrome34设置了一个解决方案，设置display none，而不是淡入不透明度。这是一个比我使用display:none做的更好的解决方案，并且易于用d3.js实现。谢谢

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");