CSS锚定定位SVG子元素的兼容性问题问询

问题描述 #

尝试用CSS锚定定位将popover元素锚定到SVG的<rect>元素时，出现跨浏览器不一致的问题：

• Chrome中，锚定的popover显示在视口中心（默认位置），未遵循锚定规则
• Firefox中，popover显示在页面顶部；仅当SVG使用原始尺寸未缩放（width与viewBox尺寸比例一致，无缩放）时，锚定功能才能正常生效

实际场景为SVG图表的tooltip展示，由于CSS锚定定位是较新特性，需确认锚定到SVG子元素是否属于已知功能限制。

最小复现代码 #

HTML #

<svg width="1000" viewbox="0 0 100 30">
  <rect id="rect1" x="0" y="10" width="10" height="20" fill="lime" />
  <rect id="rect2" x="10" y="20" width="10" height="10" fill="crimson" />
  <rect id="rect3" x="20" y="15" width="10" height="15" fill="gray" />
</svg>
<div id="circle"></div>
<button popovertarget="popover1">Open popover anchored to SVG rect</button>
<button popovertarget="popover2">Open popover anchored to div</button>
<div id="popover1" popover="auto">
  I should be anchored to the gray rect.
</div>
<div id="popover2" popover="auto">
  I should be anchored to the orange circle.
</div>

CSS #

#rect3 {
  anchor-name: --anchor-rect;
}
#circle {
  anchor-name: --anchor-circle;
}
#circle {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  background: orange;
  border-radius: 50%;
}
button {
  display: block;
}
#popover1 {
  position: absolute;
  position-anchor: --anchor-rect;
  position-area: top;
}
#popover2 {
  position: absolute;
  position-anchor: --anchor-circle;
  position-area: top;
}

解答 #

锚定SVG子元素属于CSS锚定定位的已知浏览器兼容性限制，具体原因如下：

• Chrome：目前对SVG内部元素作为锚定目标的支持未完善，SVG坐标系统与CSS盒模型的差异导致浏览器无法正确计算锚定位置，因此回退到popover的默认定位。
• Firefox：仅支持未缩放SVG的锚定场景，当SVG通过viewBox和width/height产生缩放时，浏览器无法将SVG内部元素坐标转换为页面CSS坐标空间，锚定计算失效，popover回到页面顶部。

临时替代方案 #

若需实现SVG图表tooltip的锚定效果，可采用以下方案：

• 通过JavaScript监听目标元素的mouseenter/mouseleave事件，使用getBoundingClientRect()计算元素的页面位置，手动设置tooltip的top/left坐标
• 使用SVG的<foreignObject>包裹HTML元素作为锚定目标，利用HTML元素的CSS盒模型实现可靠锚定

内容的提问来源于stack exchange，提问作者peperoli