在Chrome 38中有2个以上路径的SVG clipPath

Question

不确定自更新到最新Chrome后我的SVG图标发生了什么。它们似乎仍然在Safari和Firefox中正确显示我支持的其他浏览器。在以前版本的Chrome中完美运行我一直在测试。

似乎示例中的clipPath元素中有两个或更多路径元素，其中图标未按预期呈现。根据：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath我可以在clipPath中放置任意数量的允许元素，所以我相信我这样做是正确的......所以我为什么突然对我产生了影响。

所以基本上，如果你看一下图像，你会看到杀蟑螂和眼球看起来与左边预期的不同，它们现在是如何在右侧呈现......

http://codepen.io/dapinitial/pen/Kflpv

<svg>
  <defs>
    <clipPath id="diff-path">
      <path d="M17.19,7.349 C18.753,7.349 20.019,8.626 20.019,10.202 C20.019,11.777 18.752,13.056 17.19,13.056 C15.628,13.056 14.361,11.778 14.361,10.202 C14.361,8.625 15.627,7.349 17.19,7.349 L17.19,7.349 L17.19,7.349 Z" />
      <path d="M0.19,10.201 C0.19,10.201 6.833,20.152 17.19,20.152 C27.547,20.152 34.19,10.201 34.19,10.201 C34.19,10.201 27.414,0.249 17.19,0.249 C6.966,0.249 0.19,10.201 0.19,10.201 L0.19,10.201 Z M10.125,10.201 C10.125,6.269 13.288,3.082 17.19,3.082 C21.091,3.082 24.254,6.269 24.254,10.201 C24.254,14.132 21.091,17.32 17.19,17.32 C13.288,17.32 10.125,14.132 10.125,10.201 L10.125,10.201 Z"></path>
    </clipPath>
  </defs>
</svg>

Answer 1

您需要指定一个不同的＆＃34;剪辑规则＆＃34;剪辑路径的属性。如果我将clip-rule="evenodd"添加到您的clip-path元素，它会修复一些事情。