1

我需要获取已被裁剪的 SVGElement 的 boundingClientRect - 使用此信息，我想将 HTML 元素放置在 SVG 元素的顶部。

我的 SVG 看起来像这样（简化，原来的有多个级联视口和多个级联变换）：

<svg width="96" height="80">
  <clippath id="clip">
    <path d="M 0 0 L 96 0 L 96 80 L 0 80 Z"/>
  </clippath>
  <g clip-path="url(#clip)">
    <image x="0" y="-8" width="96" height="96" xlink:href="…" transform="…"/>
  </g>
</svg>

我想将 HTML 元素放在 SVGGElement 之上。为此，我得到了 boundingClientRect

  • 被定位的 HTMLElement
  • HTMLElements 父级
  • 元素 ？这使我可以在应用了 Clipping 的情况下获得 SVGGelement 的 boundingClientRect

在 Chrome 中，这是通过获取 SVGPathElement 的 boundingClientRect 来实现的。在 Opera 和 Firefox 中，生成的 clientRect 的宽度和高度为 0（可能是因为路径元素没有显示）。SVGGelement 本身的 boundingClientRect 从包含的 SVGImageElement 获取其尺寸，而不管应用的剪辑路径如何。

我尝试通过 SVGUseElement 引用 SVGPathElement 并获取它的 boundingClientRect - 这似乎有效。

是否真的有必要引入另一个设置为可见性隐藏和指针事件的 DOM 元素：无或有人知道更好的解决方案吗？

4

0 回答 0