更新链接形状时在 Safari 中使用中断的 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 无效一样。我可以通过不在 xlink 命名空间下设置 use href 来强制执行类似的行为。

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

问题：

我是不是粗鲁地修改了链接的形状？
如果知道，这是 Safari/WebKit 中的已知错误吗？
有什么解决方法吗？

Answer 1

据我所知，这是 WebKit 中的一个错误，fiddle 在最新的 nightly (r180500) 中失败。我 reported the bug.

为了解决这个问题，我将 #clipShape 克隆到 clipPath - 当我需要更改 #clipShape.[=14 的任何属性时，根据需要重复此操作=]

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

SVG clipPath with USE breaking in Safari when updating linked shape

javascript

safari

svg

webkit

d3.js