更新链接形状时，在Safari中使用USE的SVG clipPath

Question

我有一个看起来像这样的SVG：

<svg ...>
  <rect id="clipShape" width="500" height="500"></rect>

  <g id="content" clip-path="url(#clip)">
    <!-- some content -->
  </g>

  <clipPath id="clip">
    <use xlink:href="#clipShape"></use>
  </clipPath>
</svg>

我需要对#clipSource进行调整，例如在SVG的生命周期中更改width和height。但是要这样做：

d3.select('#clipShape').attr({ height: "200", width: "200" });

将破坏Safari中的剪辑。 #content将完全隐藏，就像clipPath无效一样。我可以通过不在use命名空间下设置href xlink来强制执行类似行为。

我已在this fiddle中捕获了该问题。我在Chrome，FF，Opera或IE11中没有看到这个问题。

问题：

1. 我是否粗暴地修改链接的形状？
2. 如果是嘴巴，这是Safari / WebKit中的已知错误吗？
3. 有关解决方法的任何想法吗？

Answer 1

据我所知，这是WebKit中的一个错误，小提琴在最新的夜晚（r180500）失败了。我reported the bug。

要解决此问题，我将#clipShape克隆到clipPath - 当我需要更改#clipShape的任何属性时，根据需要重复此操作。