更新链接形状时，Safari中的SVG clipPath与USE断开

SVG clipPath with USE breaking in Safari when updating linked shape

本文关键字：clipPath SVG USE 断开 中的 Safari 链接 更新      更新时间：2024-01-12

我有一个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>

我需要在SVG的整个生命周期中对#clipSource进行调整，例如更改width和height。然而，例如：

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

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

我已经掌握了这个问题。我在Chrome、FF、Opera或IE11中没有看到这个问题。

问题：

  1. 我修改链接形状是不是很粗鲁
  2. 如果是，这是Safari/WebKit中已知的错误吗
  3. 有没有想过变通办法

据我所知，这是WebKit中的一个错误，fiddle在最近的夜间（r180500）中失败。我已经报告了这个错误。

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

相关文章：