SVG clipPath與使用Safari中打破時更新鏈接形狀

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無效。我可以通過在xlink命名空間下設置usehref來強制執行類似的行爲。

我在this fiddle中發現了這個問題。我在Chrome，FF，Opera或IE11中看不到這個問題。

問題：

1. 我被粗魯修改鏈接形狀？
2. 如果couth，這是Safari/WebKit中的一個已知錯誤嗎？
3. 有關解決方法的任何想法？

Answer 1

據我所知，這是WebKit中的一個錯誤，小提琴在最近的夜晚（r180500）失敗。我有reported the bug。

要解決該問題，我將#clipShape克隆到clipPath - 在需要更改#clipShape的任何屬性時根據需要重複此操作。